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 查找相关资料~