jQuery如何阻止子元素继承父元素事件?
2014-07-30 13:59
218 查看
<a> <b></b> </a> $("a").click(...);
这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而不对子元素绑定呢?即b被click之后自己并不触发回调函数,而是把事件传递给a。
我现在的做法是:直接在a上写
<a onclick="xxx"></a>,这样b就不会把自己作为event.target触发回调了.
--- 更新 ----
大家可能对我的意思有误解,我不是要阻止事件冒泡,恰恰相反,我是要b在接受到click事件的时候直接把事件向上传递给a,就像我在代码里面指定的那样
---- 再次更新 ---
代码是这样的
$('a').click(function(evt){ var self = $(evt.target); self.addClass('btn-primary'); });
这时候,如果点击了b, 那么b会被加上btn-primary这个class,但是我想点击了b,也只是给a添加 这个class,希望处理事件的对象是a,不是b
javascript
工作机制是这样的,当你点击内层的元素 b
时,首先浏览器会捕获这个事件,并定位当前的 DOM
元素,接下来采用冒泡机制,向上查找父元素,直到找到绑定了点击事件的元素 a
为止。
你是希望阻止这种冒泡还是什么呢?或者题主可以直接贴代码,再写需求。:)你可以实现这么几个需求:
1.阻止事件冒泡,但不阻止默认行为。如
stopPropagation或楼上用的
cancelBubble等。
2.阻止默认行为,但不阻止事件冒泡。如
preventDefault方法。
3.同时阻止事件冒泡和默认行为。直接
return false即可。
给b添加一个事件,里面禁止事件冒泡就行了 (这样也能消除父级对子级的影响)-->e.cancelBubble = true;
eg :
<script type="text/javascript"> function f1(e){ alert("你点击了一个链接"); //取消冒泡 e.cancelBubble = true; } function f2(e){ alert("你点击了一个DIV"); } </script> </head> <body style="font-size:30px;"> <div onclick="f2(event);"> <a href="javascript:;" onclick="f1(event);">ClickMe</a>
</div> </body>
相关文章推荐
- jQuery如何阻止子元素继承父元素事件?
- 阻止子元素继承父元素事件
- 阻止子元素继承父元素事件
- jquery如何阻止子元素相应mouseout事件
- 阻止子元素继承父元素事件
- 阻止子元素继承父元素事件具体思路及实现
- jquery阻止子元素触发父元素的事件的方法
- jquery阻止子元素触发父元素的事件的方法
- jQuery取消子元素继承父元素的事件
- 阻止子元素继承父元素事件(郁闷我一晚上的问题!)
- 一个小例子解释如何来阻止Jquery事件冒泡
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- js 阻止子元素响应父元素的onmouseout事件
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- JQuery IE下如何阻止keydown事件冒泡
- 使用jquery选择器如何获取父级元素、同级元素、子元素
- HTML5 audio元素如何使用js与jquery控制其事件
- jquery创建的动态元素如何为元素添加相应事件
- jQuery:如何给动态生成的元素绑定事件?