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

zoukankan html css js c++ java

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

冒泡事件流
当事件在某一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:"�020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .main{ 800px;margin: 20px auto; text-align: center;} .main li{ float: left; 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:"�020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .main{ 800px;margin: 20px auto; text-align: center;} .main li{ float: left; 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>
查看全文

相关阅读:
win10安装完Ubuntu后重启没有引导页面，直接进入Windows的解决办法标签： ubuntu 2017-07-02 16:04 41人阅读
 Python小项目三：用curses实现2048 标签： 2048python实验楼游戏 2017-07-01 22:12 50人阅读评
 Python小项目四：实现简单的web服务器标签： web服务器网络编程python 2017-06-30 21:43 57人阅读评论
 英语魔法师之语法俱乐部阅读笔记标签：语法俱乐部英语语法 2017-06-30 15:17 24人阅读评论(0)
Good Features to track特征点检测原理与opencv（python）实现标签： pythonopencvgoodfeaturetotrack 2017-06-16 1
Harris角点检测原理与opencv（python）实现标签： harris特征点检测角点检测opencv 2017-06-14 19:01 65人阅读
 python “ImportError: No module named XXX”的解决方案标签： importErrorpython 2017-06-13 15:14
python小项目二：图片转字符画标签： pythonPIL 2017-06-12 10:26 19人阅读评论(0)
python小项目一：NBA比赛数据分析标签： python数据分析csv 2017-06-10 20:18 29人阅读评论(0)
ubuntu安装卸载遇到的诸多问题标签： ubuntuwindows 7 2017-06-06 21:08 54人阅读评论(0)

原文地址：https://www.cnblogs.com/kuikui/p/3237270.html