一个月没写博客了，感觉空唠唠的，有多好想写的，今天全都给补上吧，记录最近这个月的收获
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 查找相关资料~