javascript - stopImmediatePropagation 在被调用后仍在传播

Question

我在 DOM 填充期间添加了几个图像元素，我使用 jQuery“on”将点击监听器附加到添加的每个图像，为了防止在单击图像时传播事件我使用了 stopImmediatePropagation，但是这没有似乎不起作用，页面中已有的图像元素也可以获取效果。请在下面查看我的代码:

 html
 <a href="/">Logout<img src=""/></a>
 <div id="1" class="box"><img src=""/></div>
 <div id="2" class="box"><img src=""/></div>
 <div id="3" class="box"><img src=""/></div>

 javascript 
 $(img).on('click', function(e){
    e.stopImmediatePropagation();
    $(this).parent().css({"color":"red"});
    return $(this).parent().attr('id');
 });

当我单击 div 中的图像时，颜色变化会传播到注销，其中颜色应该只影响被单击的 div(img 的父级)。

可能有什么问题或原因？

Answer 1

听起来你想改变背景颜色，它是background-color(或只是background)，而不是color。 Here's a fiddle这就是您要实现的目标。

我认为您误解了 jQuery 附加事件处理程序的方式，以及传播的全部内容。

举个例子:

<div>Foo</div>
<div>Bar</div>
<div>Baz</div>

<script>
    $('div').click(function(){
        alert($(this).text());
    });
</script>

它的作用是为每个 div 附加一个监听器。单击 div 时，它会触发 click 事件，并且 附加到该元素 的任何监听器都会触发。

稍微复杂一点的例子:

<div id="divFoo">
    <p id="pFoo">Foo</p>
</div>

<script>
    $('#divFoo').click(function(){
         alert('divFoo');
    });

    $('#pFoo').click(function(){
         alert('pFoo');
    });
</script>

现在 divFoo 有一个点击处理程序，pFoo 也有一个。请注意，pFoo 的父级 (divFoo) 也附加了一个点击处理程序。

传播 与“向上冒泡”DOM 树的事件有关。因此，如果我单击 pFoo，处理程序将触发。 click 事件将“冒泡”到父级 div，divFoo 处理程序将触发。 $.stopPropagation 阻止了这种情况的发生。

顺便说一句，如果我们有 2 个处理程序附加到一个元素，那么 $.stopImmediatePropagation 也会阻止任何其他处理程序触发。事件触发的顺序本质上是先到先得，但不完全是 - Stack 上还有另一个关于这个的问题 :)。

This fiddle有一个更完整的例子。

请注意，DOM 树的字面意思是一棵树。

-- Root Div    (level 0)  #A
|--- Child P   (level 1)  #B
|--- Child P   (level 1)  #C
|--- Child Div (level 1)  #D
|----- Child P (level 2)  #E
|--- Child P   (level 1)  #F

假设我将处理程序附加到#E。该事件将“冒泡”到#D(它的父级)，然后到#A(它的父级)。它不会触及 #B、#C 或 #F，因为它们是 sibling - 不是祖先。