cari

Rumah  >  Soal Jawab  >  teks badan

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

1

2

3

4

5

<code><a>

    <b></b>

</a>

$("a").click(...);

</code>

这种绑定的话，b也会响应一次事件，如何只对a元素绑定事件，而不对子元素绑定呢？即b被click之后自己并不触发回调函数，而是把事件传递给a。

我现在的做法是：直接在a上写 <a onclick="xxx"></a> ，这样b就不会把自己作为event.target触发回调了.

--- 更新 ----
大家可能对我的意思有误解，我不是要阻止事件冒泡，恰恰相反，我是要b在接受到click事件的时候直接把事件向上传递给a，就像我在代码里面指定的那样

---- 再次更新 ---
代码是这样的

1

2

3

4

5

<code>$('a').click(function(evt){

       var self = $(evt.target);

       self.addClass('btn-primary');

});

</code>

这时候，如果点击了b， 那么b会被加上btn-primary这个class，但是我想点击了b，也只是给a添加 这个class，希望处理事件的对象是a，不是b

----- 完结 ----
感谢 @冰果果，此处应该使用$(this) 而不是 $(evt.target),附区别
http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html

巴扎黑巴扎黑2910 hari yang lalu324

membalas semua(2)saya akan balas

  • 怪我咯

    怪我咯2017-04-10 14:27:19

    还是没太明白题主的问题，javascript 工作机制是这样的，当你点击内层的元素 b 时，首先浏览器会捕获这个事件，并定位当前的 DOM 元素，接下来采用冒泡机制，向上查找父元素，直到找到绑定了点击事件的元素 a 为止。
    你是希望阻止这种冒泡还是什么呢？或者题主可以直接贴代码，再写需求。:)
    你可以实现这么几个需求：
    1.阻止事件冒泡，但不阻止默认行为。如 stopPropagation 或楼上用的 cancelBubble等。
    2.阻止默认行为，但不阻止事件冒泡。如 preventDefault 方法。
    3.同时阻止事件冒泡和默认行为。直接 return false 即可。

    题主应该早点贴具体代码出来，这里对为什么用 this 做个解释，当你将子元素事件委托到父元素时，函数体内 this 将指向父元素，而 event.target 指向的是触发事件的子元素，这也是事件委托得以实现的基础。
    推荐下 @TomDong 喵哥的博文 《事件委托和冒泡机制有关系吗？》
    我也写过一篇介绍事件委托的博文 《Javascript - 事件委托是怎么工作的？》
    题主不妨一读。:)

    balas
    0
  • 高洛峰

    高洛峰2017-04-10 14:27:19

    给b添加一个事件，里面禁止事件冒泡就行了 （这样也能消除父级对子级的影响）-->e.cancelBubble = true;

    eg :

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <code>   <script type="text/javascript">

        function f1(e){

            alert("你点击了一个链接");

            //取消冒泡

            e.cancelBubble = true;

        }

        function f2(e){

                alert("你点击了一个p");

        }

         </script>

        </head>

        <body style="font-size:30px;">

            <p onclick="f2(event);">

                <a href="javascript:;" onclick="f1(event);">ClickMe</a>

            </p>

        </body>

    </code>

    balas
    0
  • Batalbalas