html移动端tap事件穿透问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/idongit/article/details/89763780

应用场景：点击底部弹框的按钮时，会穿透到弹框下面的按钮，触发弹框下面的按钮的点击事件。

造成原因：点击关闭按钮，touchend首先触发tap，弹出层和遮罩就被隐藏了。touchend后继续等待300ms发现没有其他行为了，则继续触发click，由于这时弹出层已经消失，所以当前click事件的target就在底层元素上，于是就alert内容。整个事件触发过程为 touchend -> tap -> click。

而由于click事件的滞后性（300ms），在这300ms内上层元素隐藏或消失了，下层同样位置的DOM元素触发了click事件（如果是input框则会触发focus事件），看起来就像点击的target“穿透”到下层去了。

解决办法：在底部弹框的tap事件里，暂时不再监听弹框下面按钮的点击事件，设置定时器，超过click事件的滞后时间（300ms）后再设置监听

$('#closePopup').on('tap', function(e){
    $('#popupLayer').hide();
    $('#bgMask').hide();

    $('#underLayer').css('pointer-events', 'none');

    setTimeout(function(){
        $('#underLayer').css('pointer-events', 'auto');
    }, 400);
});

解决参考自大神博客，详情请移步大神博客：https://www.cnblogs.com/xiaoxingyiyi/p/5447378.html