jQuery防止事件泡沫的实例分析

本文说明了jQuery可以防止事件冒泡。分享给大家参考，如下：

在正常的开发过程中，我们肯定会遇到用div包装div的情况(这个div可以是一个元素)。然而，事件被添加到两个div中。如果我们点击里面的div，我们希望处理这个div的事件。然而，我们不希望执行外部div的事件，所以我们需要防止冒泡。

说白了，你在家看电视，躲在自己的小房间里，却不希望声音传到隔壁父母的耳朵里。这时候你可能躲在床上，或者墙壁的隔音效果很好，所以阻隔声音可以理解为防止冒泡。

防止事故冒泡的三种方法

1.返回false:可以防止默认事件和冒泡事件

2.在event.stopPropagation/IE;下为true:可以防止冒泡事件，但允许默认事件

3、event . preventdefault()；Event.returnValue=false下：可以阻止默认事件，但允许冒泡事件

以上三种方法在不同场景下使用，可以合理使用。下面是代码，您可以自己做一些测试：

！doctype html html headlang=' en ' metacarset=' utf-8 ' title jquery防止冒泡/title style . div 1 { width : 140 px；border: 1px纯蓝；} . div 2 { width : 100 px；高度： 100像素；margin: 20pxborder: 1px纯红；}/style/head dydiv class=' div 1 ' div class=' div 2 '点击我！/div/diva href=' http : www . Baidu.com ' rel=' external nofollow ' id=' a1 ' Baidu/JavaScript src=' http:http://libs.baidu.com/jquery/2.0.0/jquery.min.js'/script script $(. div 1 ')。bind('click '，function(){ alert(' div 1 ')；});$(. div 2 ')。bind('click '，function(){ alert(' div 2 ')；//返回false//还可以通过返回false if(window.event){//IE来防止冒泡。防止冒泡事件，event.cancelBubble=true} else { event . stopperpagation()；} });阻止默认事件event.returnValue=false在$(“# a1”)下。bind ('click ')，function () {if (window。事件){//ie；} else { event . preventdefault()；} alert('我是链接')；//返回false//如果没有添加任何阻挡事件，先玩方块，再跳，我们可以通过返回false来停止跳})；/script/body/HTML使用在线HTML/CSS/JavaScript代码运行工具，http://tools.jb51.net/code/HtmlJsRun测试运行如下：

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。