移动端页面touch会"穿透"的解决方案

移动端页面touch会"穿透"的解决方案

1.移动端页面touch会穿透

  是指当H5页面在移动端显示时，因为click事件有300ms的延迟，所以最好用touch 事件，touch事件分为

     1.touchstart：手指放在一个DOM元素上。
     2. touchmove：手指拖曳一个DOM元素。
     3. touchend：手指从一个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，鼠标还是会监听这个子元素的。让鼠标穿透该对象，不捕获鼠标事件