📌  相关文章
📜  HTML | DOM TouchEvent targetTouches 属性(1)

📅  最后修改于: 2023-12-03 15:31:12.647000             🧑  作者: Mango

HTML | DOM TouchEvent targetTouches 属性

在Web开发中，移动设备的用户都有触摸屏幕的习惯。要处理这些用户的转变，Web开发人员需要掌握触摸事件的处理方法。而 TouchEvent 对象则提供了一些属性用于检测 touchstart、touchmove 和 touchend 事件相关的信息。其中，targetTouches 属性用于返回当前激活的触摸操作在当前事件发生时位于指定的 DOM 节点上的属性。

语法
var touches = event.targetTouches;
属性值

touches：一个存储了所有当前 DOM 节点上触摸锚点的数组。

描述

targetTouches 属性返回当前 DOM 节点上被激活的触摸点 (例如，在移动设备上，你用两个手指滑动的时候，节点上就会有两个触摸点)。targetTouches 数组不包含已经离开触摸平面上的手指（即 changedTouches 数组）。

示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TouchEvent</title>
</head>
<body>
    <div id="touch" style="border:1px solid black;width:200px;height:200px;"></div>
    <script type="text/javascript">
    var touch = document.getElementById('touch');

    touch.addEventListener('touchstart', function (e) {
        for (var i = 0; i < e.targetTouches.length; i++) {
            console.log('targetTouches[' + i + ']: ' + e.targetTouches[i].target.tagName);
        }
    }, false);
    </script>
</body>
</html>
结论

以上就是关于 targetTouches 属性的详细介绍了。在重构移动端的网站时，前端工程师们应该要注意到这类事件绑定，从而提升网站的用户交互体验。