JQuery中如何阻止冒泡事件

来源：互联网 2023-03-17 00:46:36 版权归原作者所有，如有侵权，请联系我们

JQuery中阻止事件冒泡，可以使用下面三种形式：

1）event.stopPropagation(); // 阻止冒泡

2）event.preventDefault(); // 阻止默认行为 ( 用于阻止表单提交。不阻止事件冒泡 )

3）return false; // 阻止代码继续执行，包含冒泡阻止

方法/步骤

新建文件夹“bubbling”，在其内部添加“Home.html”页面，并创建“ContentJSjquery-1.11.0.min.js”。形式如下：

bubbling

-- Content

-- JS

-- jquery-1.11.0.min.js

-- Home

JQuery中如何阻止冒泡事件

在Home页面中添加Jquery文件的引用，同时，在最后添加测试引用是否成功，引用添加成功时，在浏览器中运行Home页面，会弹出“测试Jquery引用”

JQuery中如何阻止冒泡事件

在Home页面添加代码，测试正常的Jquery事件冒泡

JQuery中如何阻止冒泡事件

未阻止的Jquery事件冒泡：

1）当点击“内层div”的时候，会先触发内层div的事件，再执行外层div的事件

2）当点击“外层div”的时候，会触发外层div的事件，不会执行内层div的事件，即：冒泡是向上触发事件的

JQuery中如何阻止冒泡事件

在Home页面的“内层div”点击事件中，添加阻止事件冒泡的代码，将不会看到“外层div”的事件执行

JQuery中如何阻止冒泡事件

5此文章未经授权抓取自百度经验

注意：如果不使用“return false”来阻止冒泡，上述代码在旧版本的IE中会报错，需要换种方式实现。所以，安全起见，使用“return false;”适用任何浏览器

JQuery中如何阻止冒泡事件

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY