js 触摸事件 touch

最新推荐文章于 2025-05-16 19:37:03 发布

原创最新推荐文章于 2025-05-16 19:37:03 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#事件 #touch

Web前端专栏收录该内容

123 篇文章

订阅专栏

本文展示如何使用JavaScript处理触摸事件，在网页上实现鼠标跟随效果，包括触摸开始、移动和结束事件的监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>touch</title>

    <style type="text/css">
        body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #canvas{
            position: relative;
            width: 100%;
            height: 1000px;
        }

        .spirit {              /* 方块的class名称*/
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div id="canvas"></div>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
       var spirit,startX,startY;
    // touch start listener

        function touchStart(event) {
                 event.preventDefault();
                 if (spirit ||! event.touches.length) return;
                 var touch = event.touches[0];
                 startX = touch.pageX;
                 startY = touch.pageY;
                 spirit = document.createElement("div");
                 spirit.className = "spirit";
                 spirit.style.left = startX+"px";
                 spirit.style.top = startY+"px";
                 canvas.appendChild(spirit);
                 console.log(startX);
        }

        // add touch start listener
        canvas.addEventListener("touchstart",touchStart,false);

         function touchMove(event) {
                event.preventDefault();
                if (!spirit || !event.touches.length) return;
                var touch = event.touches[0];
                var x = touch.pageX-startX;
                var y = touch.pageY-startY;
                spirit.style.webkitTransform = 'translate('+x+ 'px, '+y+'px)';     
            console.log(2);
        }

        canvas.addEventListener("touchmove", touchMove, false);
        function touchEnd(event){
            if(!spirit)return;
            canvas.removeChild(spirit);
            spirit=null
        }
        canvas.addEventListener("touchend",touchEnd,false);
    </script>
</body>
</html>

运行时，触摸处会出现一个红色正方形，跟随鼠标滑动

这里写图片描述

知识点：

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

touchstart:  // 手指放到屏幕上的时候触发 
touchmove:  // 手指在屏幕上移动的时候触发 
touchend:  // 手指从屏幕上拿起的时候触发 
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。

在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新
的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次
屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到
（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：

client / clientY：// 触摸点相对于浏览器窗口viewport的位置 
pageX / pageY：// 触摸点相对于页面的位置 
screenX /screenY：// 触摸点相对于屏幕的位置 
identifier： // touch对象的unique ID