移动端的事件基础

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

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标签跳转解决方案

window.onload=function(){
    // 阻止默认事件，a标签也会被阻止
    document.addEventListener("touchstart",function(ev){
        ev=ev||event;
        ev.preventDefault();
    })
    //移动端a标签的跳转方案  解决误触
    var aNodes = document.querySelectorAll("a");
    for(var i=0;i<aNodes.length;i++){
        aNodes[i].addEventListener("touchstart",function(){
            this.isMoved=false;
        })
        aNodes[i].addEventListener("touchmove",function(){
            this.isMoved=true;
        })
        aNodes[i].addEventListener("touchend",function(){
            if(!this.isMoved){
                location.href=this.href;
            }
        })
    }
}

五、事件常用的事件属性

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

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

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