移动端点透问题的处理

1.1 移动端点透问题是啥?
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件, 如果被覆盖的元素监听click事件,touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。

1.2 点透问题的出现原因
① 当手指触摸到屏幕的时候,系统生成两个事件,一个是touch 一个是click
② touch事件先执行,执行完后从文档上消失
③ click事件有100~300ms延迟,所以后执行
④ 但touch事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件。

1.3 移动端点透问题解决方案

① js可以在touch事件中添加event.preventDefault(); 阻止事件扩散。
② 如果是vue可以使用@click.stop取消事件冒泡,@click.prevent阻止默认事件
③ 使用css,可以使用 pointer-events: none;(翻译过来就是指针事件),这是告诉浏览器当前元素不需要接收事件。

1.3.1 事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值