什么是事件冒泡？
事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序。
demo：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="jquery-1.8.3.min.js"></script> <script> $(function () { $("#div").click(function () { $(this).text("我是div"); }); $("#img").click(function () { $(this).parent().css("border", "1px solid red"); }); }) </script> </head> <body> <div id="div"> <img id="img" src="images/gd.jpg" /> </div> </body> </html>
当点击div下的img元素时界面效果如图：
通过上面代码我们只是想当鼠标点击图片时让div的边框成红色并没有要删除图片，但他在执行子元素（img)的事件处理程序时自动调用了父级元素（div）这就是事件冒泡。
如何取消事件冒泡？
事件冒泡是可以由程序员手工取消的也就是在子元素的事件处理程序中手动的停止调用父级元素
demo：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="jquery-1.8.3.min.js"></script> <script> $(function () { $("#div").click(function () { $(this).text("我是div"); }); $("#img").click(function () { $(this).parent().css("border", "1px solid red"); event.stopPropagation();}); }) </script> </head> <body> <div id="div"> <img id="img" src="images/gd.jpg" /> </div> </body> </html>
如上所示代码就可以取消事件冒泡
demo：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="jquery-1.8.3.min.js"></script> <script> $(function () { $("#div").click(function () { if( event.target == event.currentTarget){ $(this).text("我是div"); } }); $("#img").click(function () { if( event.target == event.currentTarget){ $(this).parent().css("border", "1px solid red"); } }); }) </script> </head> <body> <div id="div"> <img id="img" src="images/gd.jpg" /> </div> </body> </html>