javascript - 被调用后stopImmediatePropagation仍在传播

我在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的父级）。
可能是什么问题或原因？

最佳答案

听起来你想改变背景颜色，那就是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有一个click处理程序，pFoo也有一个。请注意，pFoo的父级（divFoo）也附加了一个单击处理程序。
建议是与“冒泡”DOM树的事件有关。因此，如果单击pFoo，处理程序将启动。然后click事件将“冒泡”到父div，并且divFoo处理程序将启动。$.stopPropagation防止这种情况发生。
另外，如果我们有两个处理程序附加到一个元素，那么$.stopImmediatePropagation也将阻止任何其他处理程序触发。事件发生的顺序基本上是先到先得，但不完全是这样的。
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，因为它们是兄弟姐妹，而不是祖先。