JS中阻止冒泡事件的三种方法

冒泡事件：比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

<div class="box"><button class="btn">按钮</button>
</div><script type="text/javascript">$('.btn').click(function () {alert('按钮被点击了')});$('.box').click(function () {alert('box被点击了')})
</script>

当我们点击按钮后，因为按钮也属于.box元素，所以按钮的父元素.box也会触发点击事件

阻止冒泡事件有三种方法：

1.event.stopPropagation()方法

 $('.btn').click(function (even) {even.stopPropagation();alert('按钮被点击了');})

这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
例如：

<a href="https://www.csdn.net/" class="box"><button class="btn">按钮</button>
</a>

2.event.preventDefault()方法

 $('.btn').click(function (even) {even.preventDefault();alert('按钮被点击了');})

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

3.return false ；

 $('.btn').click(function (even) {alert('按钮被点击了');return false;})

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

JS中阻止冒泡事件的三种方法相关推荐

jQuery阻止冒泡事件的几种方法
一.何为冒泡事件冒泡事件简单来说就是点击子节点,会向上触发父节点.祖先节点的点击事件. 二.阻止事件冒泡可以通过以下三种方法做到不同程度的阻止. 1.return false (In event ...
js中设置元素class的三种方法小结
一.el.setAttribute('class','abc'); 复制代码代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <met ...
js之删除对象属性的三种方法判断对象中是否有某一属性的四种方法
js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法示例 1.基础版 var a = { id: 18, age: 20, name: "zhangsan" ...
JavaScript 循环中调用异步函数的三种方法，及为什么 forEach 无法工作的分析
JavaScript 循环中调用异步函数的三种方法,及为什么 forEach 无法工作的分析业务分析初版的问题解决方案传统的 for 循环不使用 for 循环的解决方案分析 forEach ...
Struts2中action接收参数的三种方法及ModelDriven跟Preparable接口结合JAVA反射机制的灵活用法...
Struts2中action接收参数的三种方法及ModelDriven跟Preparable接口结合JAVA反射机制的灵活用法 www.MyException.Cn 发布于:2012-09-15 ...
python csv库,Python 中导入csv数据的三种方法
Python 中导入csv数据的三种方法,具体内容如下所示: 1.通过标准的Python库导入CSV文件: Python提供了一个标准的类库CSV文件.这个类库中的reader()函数用来导入CSV文 ...
mysql在计算机管理中的路径怎么修改_Rstudio中修改工作路径的三种方法
原文链接: Rstudio中修改工作路径的三种方法_weixin_44370085的博客-CSDN博客_rstudio改变工作目录blog.csdn.net Rstudio中修改工作路径的三种方法 ...
计算机启动应用程序的方法,excel的程序_Excel2010中启动应用程序的三种方法
使用Excel时,需要先启动应用程序,怎么去进行操作启动它?今天,学习啦小编就教大家在Excel2010中启动应用程序的三种方法. Excel2010中启动应用程序的三种步骤如下: 1.开始菜单在桌 ...
js获取DIV的位置坐标的三种方法！
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...

JS中阻止冒泡事件的三种方法

1.event.stopPropagation()方法

2.event.preventDefault()方法

3.return false ；

JS中阻止冒泡事件的三种方法相关推荐

最新文章

热门文章