移动端事件

touchstart

touchmove

touchend

event

//e.changedTouches:触发当前事件的手指列表
//e.targetTouches:触发当前事件时元素上的手指列表
//e.touches:触发当前事件时屏幕上的手指列表
e.changedTouches[0]//打印任意一个列表的第一根手指参数
{
    screenX: 511, 
    screenY: 400,//触点相对于屏幕左边沿的Y坐标
    clientX: 244.37899780273438, 
    clientY: 189.3820037841797,//相对于可视区域
    pageX: 244.37, 
    pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
    force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
    identifier: 1036403715,//一次触摸动作的唯一标识符
    radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
    radiusY: 37.565673828125,
    rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
    target: {} // 此次触摸事件的目标element
}

事件点透

1.pc端的事件可以在移动端触发
    click事件条件: touchstart开始的点 和touchend的点是同一个点则认为是click事件
2.PC端事件有300毫秒延迟
    比如click 在第一次点击时浏览器会先等待300毫秒确定是单击还是双击再执行click事件
3.移动端事件不会有延迟
//点击item touchstart会立即执行取消遮罩层  
//而300毫秒后 click事件开始触发,此时由于没了遮罩层而且点击的位置正好有a标签
//click事件便给与了a标签 这便是点透的原理
.item{position: absolute;left: 0;top: 0;width: 200px;height:200px;background: pink;display: block;}
<div class="item"></div>
<a href="http://www.atguigu.com">回娘家</a>
item.addEventListener("touchstart",function(){
    this.style.display="none";
})

移动端A连接跳转方案

//因为存在事件点透这个问题 所以移动端a连接跳转一般不通过click跳转 而是全面禁止默认行为后 自己实现跳转逻辑
    document.addEventListener('touchstart',function(e){
        e.preventDefault();
    });
    //自己实现跳转逻辑
    var allA = document.querySelectorAll('a');
    for(var i=0,length=allA.length;i<length;i++){
        //按下手指时设置默认 需要跳转
        allA[i].addEventListener('touchstart',function(e){
            this.jumpFlag=true;
        })
        //移动手指时 设置不需要跳转
        allA[i].addEventListener('touchmove',function(e){
            this.jumpFlag =false;
        })
        //抬起手指时跳转
        allA[i].addEventListener('touchend',function(e){
            //判断跳转条件
            if(this.jumpFlag){
                window.location.href = this.href;
            }
        })
    }

全面阻止默认行为

//chrome模拟器阻止不了 但是真机上是可以阻止的 不要完全信任模拟器
//隐患: 页面上所有的滚动条失效  解决办法自定义滚动条
  
document.addEventListener("touchstart",function(e){
        e = e || window.event;
        e.cancelable;//返回当前事件的默认行为是否可以被阻止(布尔值)
        e.preventDefault();
})