touch事件中的touches、targetTouches和changedTouches详解

Posted 2023-04-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了touch事件中的touches、targetTouches和changedTouches详解相关的知识，希望对你有一定的参考价值。

参考技术A touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性：

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一)
　　var e=arguments[0]
　　e.preventDefault()

移动web touch事件

参考：http://www.cnblogs.com/dojo-lzz/p/5452575.html

　　wap中的原生touch 事件，touchstart、touchmove、touchend、touchcancel，这些事件仅仅在移动端才会被触发，在pc端无效。而且在web中也没有PC的鼠标事件。两个端都存在click事件，但在web下会存在以下两个问题：

移动端click事件存在300ms延迟

　　因为网页中存在一种双击放大的操作，两次点击之间不超过300ms则认为是双击，所以浏览器为了区别是双击还是单击，单击的效果会有300ms延迟。了有更好的用户体验，需要自己利用以上的4个touch事件封装一些更快的点击事件（一般由touchstart以及touchend组成）其实也可以使用第三方库如zepto，使用里面封装的tab事件。或者使用插件 fastclick。

穿透现象

　　遮罩上绑定一个touchstart事件，触发就使遮罩消失，然后300ms后触碰点下的元素的click事件会被触发。原因也还是因为以上的300ms延迟。点击300ms发生后，浏览器寻找触碰点的顶层元素，然后触发一次click事件，大致过程如下：

e = document.elementFromPoint(x, y);
e.dispatchEvent(\'click\');

　　以下代码会出现穿透现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
</head>
<body>
<style>
    .splash{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(99,99,99,0.2);
    }
</style>
<div class="splash"></div>
<button onclick="console.log(\'click\')">这是按钮</button>
<script>
    let splash = document.querySelector(\'.splash\');
    splash.addEventListener(\'touchend\',()=>{
        splash.style.display = "none";
    })
</script>
</body>
</html>

为了解决以上两个问题，需要自己封装web的点击事件，封装的思路如下：

touchstart和touchend组成一次点击事件，按下和抬起之间所移动的距离不得超过4px
在捕获阶段，对click事件进行事件流拦截

以上是关于touch事件中的touches、targetTouches和changedTouches详解的主要内容，如果未能解决你的问题，请参考以下文章

Android中的Touch事件处理如何去掉这种警告

touch事件中的touchestargetTouches和changedTouches详解

移动的 touch事件中的touchestargetTouches和changedTouches

移动web touch事件