版权声明:本文为博主原创文章,未经博主允许不得转载。 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