移动端事件

触屏事件

touchstart、touchmove、touchend

event

event.changeTouches : 触发当前事件的手指列表
event.targetTouches : 触发当前事件元素上的手指列表
event.touches : 触发当前事件屏幕上的手指列表

默认行为

移动端要禁止所有的默认行为，包括长按选中效果，右击菜单事件，a标签点击跳转事件，滚动条事件 … …

e.cancelable() : 判断某默认行为是否可以被阻止
e.preventDefault() : 阻止默认行为
onContentmenu : 右击菜单事件

//这是给 document 添加阻止默认行为
document.addEventListener('touchstart',function(e){
	e = e || event
	e.cancelable()   // false / true
	e.preventDefault()
})

[注意] 给 document 添加阻止默认行为，不起作用，通常会用一个包裹元素来模拟 document , 然后给 这个包裹元素添加阻止默认行为

#wrap{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

var wrap = document.querySelector("#wrap");

wrap.addEventListener('touchstart',function(e){
	e = e || event
	e.cancelable()   // false / true
	e.preventDefault()
})

若某一元素需要单独保留事件的默认行为，则需要单独给该元素添加e.stopPropagation()

事件点透 / 误触

• PC端事件可以在移动端触发
• PC端事件(如：click 事件)有 300ms 延迟
• 移动端事件不会有延迟，立即执行

由于会发生事件点透问题，所以需要禁止 a 标签的默认跳转行为，然后自定义 a 标签的跳转

误触：当滑动屏幕（touchmove）时，不能进行跳转行为

//自定义 a 标签的跳转
var aNodes = document.querySelectorAll("a");
    aNodes.forEach((a)=>{
        a.addEventListener("touchstart",()=>{
            a.isMoved = false;
        })

        a.addEventListener("touchmove",()=>{
            a.isMoved = true;
        })

        a.addEventListener("touchend",()=>{
            if(!a.isMoved){
                location.href = a.href;
            }
        })
    })