JS移动端触屏事件

在我们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("触摸结束")
    }

请添加图片描述

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

posted @ 2023-11-12 21:44  一叶知秋04  阅读(52)  评论(0编辑  收藏  举报  来源