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); 

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

其实，一般情况下，我们都是想得到的就是touch list 也就是touchEvent.touches

touch对象的属性（常用）：

1. screenX ： 触点相对于屏幕左边沿的的X坐标

2.screenY：触点相对于屏幕上边沿的的Y坐标

3.clientX：触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移

4.clientY：触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移

5.pageX：触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移

6.pageY：触点相对于HTML文档上边沿的的Y坐标. 当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移.

7.force：手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数.

8.target：当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素.

用的比较多的可能就是clientX，clientY了吧~ 获取可见区域的坐标，然后记录start 的坐标在move和end时进行相关操作~

如果有兴趣的或者想更深入了解的同学可以去MDN 查找相关资料~