JavaScript

原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?

前言

事件冒泡,可能有些同学还不是很清楚,什么是事件冒泡?来看个简单例子。

<div onclick="alert('最外层')">
    <div onclick="alert('中间层')">
        <a id="ahref" href="http://www.javanx.cn" onclick="alert('最里层')">点击我</a>
    </div>
</div>

点击“点击我”,会依次弹出:最里层---->中间层---->最外层---->然后跳转链接,这就是事件冒泡,下面来看看如何解决这个问题

原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?

JavaScript解决事件冒泡

event.stopPropagation()

$(function() {
    $("#ahref").click(function(event) {
        event.stopPropagation();
    });
});

再点击“点击我”,会弹出:最里层---->然后跳转链接

return false;

$(function() {
  $("#ahref").click(function(event) {
    return false;
  });
});

再点击“点击我”,会弹出:最里层,但不会跳转链接

event.preventDefault()

$(function() {
  $("#ahref").click(function(event) {
    event.preventDefault()
  });
});

点击“点击我”,依次弹出:最里层---->中间层---->最外层,但最后没有跳转链接

由此可以看出

event.stopPropagation()
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

return false
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

event.preventDefault()
事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

Vue解决事件冒泡

Vue.js为v-on提供了 事件修饰符,我们只需要添加click.stop即可防止事件冒泡

<div @click="cancelSelect">
    <div class="picker_alert" @click.stop>
        <div class="ofh">
            <span @click="toRoomManagement">编辑</span>
            <span @click="confirmRoom">确定</span>
        </div>
    </div>
</div>

vue事件修饰符

.stop

.prevent

.capture

.self

.once

<!-- 阻止单击事件冒泡 -->
<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>

<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

提示:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。

小程序解决事件冒泡

<view bindtap='tap'>
  <view id='5' catchtap='catTap'></view>
</view>

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

(35)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注