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

阻止事件冒泡

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

阻止事件冒泡——商品编辑相关推荐

Vant 步进器 van-stepper 阻止事件冒泡
一般情况下 Vue 阻止事件冒泡用 .stop 即可解决 Vue 阻止事件默认行为用 .prevent 解决今天这里是介绍 Vant 框架里写购物车,需求是购物车中的商品点击也可以进入到商品详情,于 ...
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
事件冒泡添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
as3.0中如何阻止事件冒泡?
as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mo ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
事件冒泡和阻止事件冒泡
事件冒泡当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
微信小程序中阻止事件冒泡
使用场景如上图,这是一个活动的列表页面,当用户点击整个列表时,跳转到活动详情页面,当用户点击"去报名"按钮时,跳转到报名页面.但是当我们用"bindtap"事 ...
利用事件冒泡和阻止事件冒泡的例子
利用事件冒泡机制页面中的评分界面,大家一定都很熟悉,现在假如我开了一家饭店,我需要一个在我们的网页上能让顾客对我的饭店进行打分.首先,我们需要两张星星的图片,一张是灰的的星星,一张是黄色的星星,我们 ...
事件冒泡及阻止事件冒泡事件的触发事件参数对象获取用户按下键盘的键
事件冒泡及阻止事件冒泡 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

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

阻止事件冒泡——商品编辑相关推荐

最新文章

热门文章