解决点击穿透的最佳实践

出现的问题：

移动端中，一般在上层的元素使用touchstart、touchmove、touchend绑定事件，而下层的元素使用click事件。

当用户触摸上层元素关闭或者删除元素时，下层的元素显露出来，并触发了点击事件。

 

原因：

浏览器为了判断用户是否双击，所以在触摸事件发生完毕之后，300ms后才触发click事件

 

最佳解决实践。

 

1.首先全部元素都使用click事件。

2.

var curTarget=null;

//选中事件

document.body.touchstart((e)=>{

　　curTarget=e.target;

})

 

//在body中拦截点击事件

document.body.touchend((e)=>{

　　e.preventDefault();

　　var clickEvent=new MouseEvent('click');

　　curTarget.dispatchEvent(clickEvent);

})