jQuery如何阻止子元素继承父元素事件？

最新推荐文章于 2020-07-11 11:07:47 发布

weixin_30363817

最新推荐文章于 2020-07-11 11:07:47 发布

阅读量174

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tancp/p/3877889.html

版权

<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 οnclick="f2(event);"> <a href="javascript:;" οnclick="f1(event);">ClickMe</a>

　　　　 </div>
    </body>

转载于:https://www.cnblogs.com/tancp/p/3877889.html

weixin_30363817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery如何阻止子元素继承父元素事件？

<a> <b></b></a>$("a").click(...);这种绑定的话，b也会响应一次事件，如何只对a元素绑定事件，而不对子元素绑定呢？即b被click之后自己并不触发回调函数，而是把事件传递给a。我现在的做法是：直接在a上写<a onclick="xxx"></a>，这样...
复制链接

扫一扫