移动端的事件基础

一、全面阻止事件的默认行为

document.addEventListener('touchstart',function(ev){
    ev = ev || event;
    ev.preventDefault();
})

隐患：页面上所有的滚动条都失效，只能自定义滚动条。也阻止了a标签的跳转。

二、针对第一点，如果想针对某个元素不阻止默认行为，可以使用阻止冒泡方法来处理

someDom.addEventListener('touchstart',function(ev){
    ev = ev || event;
    //to do something
    ev.stopPropagation();  // 阻止冒泡
})

三、事件点透原因

　　PC端的click事件在移动端是有效的，而且存在300ms的延时；然后类似触摸事件则是没有延时的；当元素之间存在层叠的时候，为上层元素绑定了touchstart事件，当触发该事件的时候，在同一个像素点上立马放开了手指，touchestart会立即执行；300ms也会触发click事件，从而导致触发了a标签的click事件，进行了页面跳转。

四、移动端a标签跳转解决方案

 1 window.onload=function(){
 2     // 阻止默认事件，a标签也会被阻止
 3     document.addEventListener("touchstart",function(ev){
 4         ev=ev||event;
 5         ev.preventDefault();
 6     })
 7     //移动端a标签的跳转方案  解决误触
 8     var aNodes = document.querySelectorAll("a");
 9     for(var i=0;i<aNodes.length;i++){
10         aNodes[i].addEventListener("touchstart",function(){
11             this.isMoved=false;
12         })
13         aNodes[i].addEventListener("touchmove",function(){
14             this.isMoved=true;
15         })
16         aNodes[i].addEventListener("touchend",function(){
17             if(!this.isMoved){
18                 location.href=this.href;
19             }
20         })
21     }
22 }

五、事件常用的事件属性

changedTouches:触发当前事件的手指列表

targetTouches:触发当前事件时元素上的手指列表

touches:触发当前事件时屏幕上的手指列表

移动端的事件基础

猜你喜欢