JS如何阻止冒泡事件

1、背景

1.1 什么是事件冒泡

当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。
优点：事件委托可以利用事件冒泡，来达到只指定一个事件处理程序就可以管理某一项类型的所有事件的效果，只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少，整个页面占据的内存空间更少，能够提升整体性能。

1.2 特殊需求

菜单栏的每一项增加一个编辑和删除按钮，因为菜单自带点击事件，在我们点击每个菜单的编辑或删除按钮时候还会去执行一遍菜单执行的操作，这种情况我们就需要阻止编辑和删除按钮的冒泡事件。

2、如何阻止冒泡事件

2.1、vue 如何阻止冒泡事件

使用@click.stop可以阻止冒泡事件

<a-button type="link"   @click.stop="deleteProfessionStation(item)" ><a-icon type="delete" /></a-button>

2.2、js原生如何阻止冒泡事件

<a-button type="link" class="link-btn"  @click="deleteProfessionStation($event,item)"><a-icon type="delete" /></a-button>

    deleteProfessionStation: function( e, professionItem ){if(window.event){ // ie 和 谷歌支持阻止冒泡window.event.cancelBubble = true; } else{ // 火狐和谷歌支持的阻止冒泡e.preventDefault(); } }

JS如何阻止冒泡事件相关推荐

js jquery阻止冒泡事件
event.stopPropagation(); -- 阻止元素冒泡事件注:嵌套元素一般都存在冒泡事件,会带来某些影响例:<div id="c1" οnclick=& ...
JS中阻止冒泡事件的三种方法
冒泡事件:比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡. <div class="box"><button c ...
js常用阻止冒泡事件
原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...
分享一个旋钮插件 jquery.knob.js 新增change事件中回调返回值功能以及阻止冒泡事件
本来都要休息了还是打开github,解决了线上一个插件的兼容性. 看来今晚能睡的比较踏实了! 插件介绍 jquery-knob是我用到的UI设计比较清新的旋钮插件之一,应用灵活,体积小,功能强大. 图 ...
jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
html 传参阻止冒泡,angular阻止冒泡事件
当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了. 以angular项目为例,我们都知道angular ...
vue阻止冒泡事件（特殊情况）
问题父级的div绑定了click事件,如果子级需要一个特殊的组件,例如:<el-popover>,本身是不需要点击事件的但是可以点击触发.这时候组件本身的点击事件就与父级div的点击事件 ...
JQuery阻止冒泡事件on绑定中异常情况分析
本文转载自https://www.cnblogs.com/tengj/p/4794947.html,纯粹作为日常笔记使用科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部butto ...
jquery阻止冒泡事件行为发生
<div οnclick="a()"> <p οnclick="b()"></p> </div> div和p元素 ...