移动端页面touch会"穿透"的解决方案
1.移动端页面touch会穿透
是指当H5页面在移动端显示时,因为click事件有300ms的延迟,所以最好用touch 事件,touch事件分为
1.touchstart:手指放在一个DOM元素上。
touch会“穿透”是在重叠的区域里,被遮盖的元素绑定click,遮盖的元素绑定touch事件,且touch后遮盖的元素会隐藏的话,就会造成穿透,因为click是在touch之后延迟触发的,浏览器会误认为是在遮盖的元素上触发了click。
移动端的click都是touch之后,才会模拟触发。
触发的顺序是
touchstart
touchmove
touchend
mousedown
mousemove
mouseenter
click
2.解决的方案是:
遮盖的元素绑定touchend事件,且触发该touchend事件时把被遮盖的元素设置为不可点击如:
$("#picList").css("pointer-events","none");
同时给 遮盖的元素绑定click 事件,在该click事件里实现阻止事件冒泡如:
$('.tab1').on('click',function(event){
var evt = event || window.event;
//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
});
3.css中pointer-events属性
- auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。
- none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。让鼠标穿透该对象,不捕获鼠标事件