Question

我在DOM填充期间添加了几个图像元素，我使用了jQuery＆＃34; on＆＃34;将点击侦听器附加到添加的每个图像，以防止在单击图像时传播事件我使用了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

我相信这是你想要实现的目标，

JS代码：

  $('img').on('click', function(e){
    console.log('click:'+$(this).parent().html());
    $(this).parent().html();
    $(this).parent().css({"background-color":"red"});
    return $(this).parent().attr('id');
  });

现场演示@ JSFiddle：https://jsfiddle.net/dreamweiver/b8wua5xe/3/

建议：尽量避免在block元素div元素inline中使用a元素，同时尽量保持dom结构整洁＆安培;不要混淆多个元素

Answer 2

听起来您想要更改背景颜色，即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事件会冒出来＃39;到父div，divFoo处理程序将触发。 $.stopPropagation可以防止这种情况发生。

顺便说一句，如果我们有2个处理程序附加到单个元素，那么$.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。该活动将“泡沫”＃39;到#D（它的父级），然后到#A（它的父级父级）。它不会触及＃B，＃C或#F，因为它们是兄弟姐妹 - 而不是祖先。

stopImmediatePropagation在被调用后仍然传播

2 个答案: