一文快速学会阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)

更新时间：2023年12月12日 10:53:32 作者：黄橘子panda

冒泡就是事件开始是由最具体的元素接收,然后逐层向上级传播到较为不具体的元素,这篇文章主要给大家介绍了关于阻止事件冒泡的4种方法,文中介绍的方法分别是原生js阻止以及vue中使用修饰符阻止的相关资料,需要的朋友可以参考下

阻止事件冒泡的方法

前端结构

<div id="app">
    <div class="father-box" @click="clickFatherBox">
        我是父盒子
        <div class="son-box" @click="clickSonBox">
          我是子盒子
        </div>
    </div>
</div>

 methods: {
        clickSonBox(){
          alert("子盒子")
        },
        clickFatherBox(){
          alert("父盒子")
        }
},

事件冒泡：clickSonBox事件发生时clickFatherBox事件也被触发了

此时点击子盒子对话框弹出两次

方法1：使用js阻止事件冒泡

clickSonBox(e){
    e.stopPropagation();
    alert("子盒子")
},
    //或者
clickSonBox(e){
     e.cancelBubble=true
     alert("子盒子")
   },

方法2：使用事件修饰符stop

绑定事件时，使用stop修饰符阻止事件冒泡

<div class="father-box" @click="clickFatherBox">我是父盒子
    <div class="son-box" @click.stop="clickSonBox">
      我是子盒子
    </div>
</div>

方法3：使用事件修饰符self

绑定事件时，使用self修饰符表示只在本元素被点击时触发

<div class="father-box" @click.self="clickFatherBox">
     我是父盒子
     <div class="son-box" @click="clickSonBox">
       我是子盒子
     </div>
 </div>

注意：

self修饰符应该在父盒子绑定事件时使用而不是子盒子! 在父盒子事件使用self,点击了子盒子，父盒子的点击事件不会被触发，即事件没有冒泡,

self表示只在当前元素发生事件时，事件才触发

总结

到此这篇关于阻止事件冒泡的4种方法(原生js阻止,vue中使用修饰符阻止)的文章就介绍到这了,更多相关前端阻止事件冒泡方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

十分钟带你读懂Vue中的过滤器
过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的，因为它所实现的功能也能用计算属性或者函数调用的方式来实现。这篇文章主要为大家介绍了Vue中过滤器的使用，需要的可以了解一下
2023-03-03
详解解决Vue相同路由参数不同不会刷新的问题
这篇文章主要介绍了详解解决Vue相同路由参数不同不会刷新的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue接口请求加密实例
这篇文章主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解Vue-Router的安装与使用
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用
2021-06-06
基于vue实现一个神奇的动态按钮效果
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-05-05
element-plus的el-tree的双向绑定示例代码
这篇文章主要介绍了element-plus的el-tree的双向绑定的示例代码,代码简单易懂,结合图文给大家展示,感兴趣的朋友跟随小编一起看看吧
2024-12-12
详解在Vue中使用TypeScript的一些思考(实践)
这篇文章主要介绍了详解在Vue中使用TypeScript的一些思考(实践)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
源码剖析Vue3中如何进行错误处理
错误处理是框架设计的核心要素之一,框架的错误处理好坏,直接决定用户应用程序的健壮性以及用户开发应用时处理错误的心智负担,本文将从源码入手,剖析一下Vue3中是如何进行错误处理的,需要的可以参考下
2024-01-01
vue初始化动画加载的实例
今天小编就为大家分享一篇vue初始化动画加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue 本地环境判断方式
这篇文章主要介绍了vue 本地环境判断方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04