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>

JS移动端触屏事件_第1张图片

touchmove

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

JS移动端触屏事件_第2张图片

touchend

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

JS移动端触屏事件_第3张图片

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

你可能感兴趣的:(javascript,开发语言,ecmascript)