遮罩层,tap点透事件

本文详细解释了移动端web应用中tap和click事件的区别,包括click事件的延时问题、tap事件可能引发的点透现象及其解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

tap和click的区别:

两者都会在点击时触发,但是在web手机端,clikc会有200-300ms的延时,所以要用tap代替click作为点击事件,singleTap和doubleTap分别作为单次点击和双击,但是使用tap会带来点透事件(事件穿透)

tap事件穿透:

执行完上层当A/B两个层上下Z轴叠层,上层的A点击后消失或者移开(原因接下来会讲),当B元素本身默认有click事件或者绑定click事件,这种情况下,点击A/B重叠的部分,就会出现点透事件绑定的tap事件后,下层如果绑定这click事件或者本身就存在点击事件(a/input)也会默认触发,这就是tap点透事件

也就是说在移动端的事件触发从早到晚排序:touchstart  touchstop click 。 所以click的触发是有延时的,about 300ms

解决方法:

1

$(function(){
 
    newFastClick(document.body);
 
})

2.

$A.on('touchend',function(e){//而touchend是原生的事件,在dom本身上就会被捕获触发
 
    $demo.hide()
    e.preventDefault();
 
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值