解决点击穿透的最佳实践

出现的问题:

移动端中,一般在上层的元素使用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);

})

原文地址:https://www.cnblogs.com/kiik/p/14471947.html