阻止事件冒泡
冒泡事件流
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 }
具体实例请看下面的效果：
事件冒泡：
点击复选框时，不能选中及取消。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>事件冒泡</title> <style> *{ margin: 0px; padding: 0px; list-style: none; color: #333; } body{ padding-top: 20px; height: 1000px; } .cfl{*zoom:1;} .cfl:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .main{width: 800px;margin: 20px auto; text-align: center;} .main li{ float: left; width: 25%; height: 240px; cursor: pointer;} </style> </head> <body> <div class="main"> <ul id="acc" class="cfl"> <li gid="1001" gname="商品1"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品1</a></p> <input type="checkbox" name="name1" /> </li> <li gid="1002" gname="商品2"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品2</a></p> <input type="checkbox" name="name2" /> </li> <li gid="1003" gname="商品3"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品3</a></p> <input type="checkbox" name="name3" /> </li> <li gid="1004" gname="商品4"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品4</a></p> <input type="checkbox" name="name4" /> </li> <li gid="1005" gname="商品5"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品5</a></p> <input type="checkbox" name="name5" /> </li> <li gid="1006" gname="商品6"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品6</a></p> <input type="checkbox" name="name6" /> </li> <li gid="1007" gname="商品7"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品7</a></p> <input type="checkbox" name="name7" /> </li> <li gid="1008" gname="商品8"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品8</a></p> <input type="checkbox" name="name8" /> </li> </ul> </div> <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> <script type="text/javascript"> var acc = { init: function(){ var _this = this; this.acc = $("#acc"); this.mcheck = "unchecked"; _this.events(); }, events: function(){ var _this = this; _this.liAction(); }, liAction: function(){ var _this = this; _this.acc.find("li").click(function(){ if($(this).find("input").attr("checked")){ $(this).find("input").removeAttr("checked"); } else{ $(this).find("input").attr("checked",true); } }); } }; acc.init(); </script> </body> </html>
阻止事件冒泡：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>事件冒泡</title> <style> *{ margin: 0px; padding: 0px; list-style: none; color: #333; } body{ padding-top: 20px; height: 1000px; } .cfl{*zoom:1;} .cfl:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .main{width: 800px;margin: 20px auto; text-align: center;} .main li{ float: left; width: 25%; height: 240px; cursor: pointer;} </style> </head> <body> <div class="main"> <ul id="acc" class="cfl"> <li gid="1001" gname="商品1"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品1</a></p> <input type="checkbox" name="name1" /> </li> <li gid="1002" gname="商品2"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品2</a></p> <input type="checkbox" name="name2" /> </li> <li gid="1003" gname="商品3"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品3</a></p> <input type="checkbox" name="name3" /> </li> <li gid="1004" gname="商品4"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品4</a></p> <input type="checkbox" name="name4" /> </li> <li gid="1005" gname="商品5"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品5</a></p> <input type="checkbox" name="name5" /> </li> <li gid="1006" gname="商品6"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品6</a></p> <input type="checkbox" name="name6" /> </li> <li gid="1007" gname="商品7"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品7</a></p> <input type="checkbox" name="name7" /> </li> <li gid="1008" gname="商品8"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品8</a></p> <input type="checkbox" name="name8" /> </li> </ul> </div> <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> <script type="text/javascript"> var acc = { init: function(){ var _this = this; this.acc = $("#acc"); this.mcheck = "unchecked"; _this.events(); }, events: function(){ var _this = this; _this.liAction(); }, liAction: function(){ var _this = this; _this.acc.find("li").click(function(){ if($(this).find("input").attr("checked")){ $(this).find("input").removeAttr("checked"); } else{ $(this).find("input").attr("checked",true); } }); _this.acc.find("input").click(function(e){ var _this = this; e = e || window.event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } if($(this).attr("checked")){ $(this).attr("checked",true); } else{ $(this).removeAttr("checked"); } }); } }; acc.init(); </script> </body> </html>
