JS之移动端触屏事件

2023-12-25 13:32:48

在我们PC端中有许多的事件，那我们在移动端有没有事件呢？让我为大家介绍一下移动端常用的事件，触屏事件
触屏事件 touch (也称触摸事件)，Android 和IOS 都有
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

常见的触屏事件

触屏touch事件说明
touchstart手指触摸到一个 DOM 元素时触发
touchmove手指在一个 DOM元素上滑动时触发
touchend手指从一个 DOM元素上移开时触发

touchstart

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    const div = document.querySelector(".box")
    div.ontouchstart = function(){
        console.log("触摸了一下")
    }
</script>
</html>

请添加图片描述

touchmove

    const div = document.querySelector(".box")
    div.ontouchmove = function(){
        console.log("一直在触摸")
    }

请添加图片描述

touchend

    const div = document.querySelector(".box")
    div.ontouchend = function(){
        console.log("触摸结束")
    }

请添加图片描述

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

文章来源:https://blog.csdn.net/m0_74577714/article/details/135196882
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。