當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

阻止事件冒泡——商品编辑

發布時間：2023/12/9 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了阻止事件冒泡——商品编辑小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

阻止事件冒泡

冒泡事件流
當事件在某一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>

運行代碼

阻止事件冒泡：

運行代碼

轉載于:https://www.cnblogs.com/kuikui/p/3237270.html

總結

以上是生活随笔為你收集整理的阻止事件冒泡——商品编辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： OpenCL: OpenCL快速入门教程
下一篇： ca证书申请流程有哪些？