JS touch

Posted 2021-02-12 Jony-IT

tags:

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

一个月没写博客了，感觉空唠唠的，有多好想写的，今天全都给补上吧，记录最近这个月的收获

https://blog.csdn.net/sinat_19327991/article/details/73823874

关于dom 的触摸事件

首先说关于Dom Event ：标识在DOM 中发生的任何事件

如何使用：

1.注册监听器

1.dom.addEventListener(‘click‘, function(){alert(‘Hello world‘);}, false);

// 参数：1. 事件类型 2.回调函数 3.冒泡 false/捕获 true （冒泡与捕获自行百度）

2. <button onclick="test();">

function test(){
    // event  返回值特殊处理后的可以直接使用
   event.preventDefault()      
}

3. dom.onclick = function(event){alert(‘Hello world‘);};

2.调用event 的方法或者属性（可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Event）

关于属性与方法就不多说了，用的比较多的方法（或者见的比较多的）：

（注意的一点是：event.cancelable ” 如果该事件的 cancelable 属性为 false, 则该事件的监听器无法阻止默认行为, 调用 preventDefault将产生错误“”）

1.preventDefault：

取消默认要做的事情，比如说你在写了一个checkbox，如果你监听了click方法并且在该方法用调用了preventDefault，那么就会阻止默认行为，或者你可以在你的监听方法里加上别的操作~比如alert一下 ~

2.stopPropagation:

阻止事件继续传播（冒泡、捕获）

比如：（样式啥的就不写了，能看明白就好）

<div onclick="test1()">
    <div onclick="test2()">
    </div>
</div>

点击里层的div 会发生test2事件，默认是冒泡，然后test1 也会执行，如果我们在test2 方法中加入stopPropagation ，那么test1 就不会执行，也就是不会传到test1。

言归正传：TouchEvent

也就是触摸事件（主要跟移动端比较匹配）

下面这段话摘自MDN：

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

每个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 element 描述。 TouchList 对象代表多个触点的一个列表.

也就是说touch 会返回一个list，触点数。

touch类型分为touchstart、touchmove、touchend、touchcancel

也就是开始、移动、结束、取消（取消用的可能比较少，主要是遇到某个某个插队导致中断等等）

直接上代码：下面是转载域 CSDN 豆i浆的博文：

function load (){ document.addEventListener(‘touchstart‘,touch, false); document.addEventListener(‘touchmove‘,touch, false); document.addEventListener(‘touchend‘,touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerhtml = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } } } window.addEventListener(‘load‘,load, false);