独立地对父/子元素执行操作

Question

我的页面中有类似于以下内容的HTML

<div id="someDiv">
    <img src="foo.gif" class="someImg" />
</div>

div设置包装器,以便在单击时background-color使用以下jQuery代码进行更改.

$("div").click(function(event){
    $(this).css("background-color", "blue");
});

我也有一些与我相关的jQuery,img它会做一些其他功能(为了论证我将要显示和警告框),如下所示:

$("img[class=someImg]").click(function(event){
    alert("Image clicked");
});

我遇到的问题是,当我点击时img,与之关联的事件div也会被触发.我很确定这是由于jQuery(或者实际上是JavaScript)处理两个DOM元素的方式 - 单击img会要求您在技术上单击div,从而触发这两个事件.

真的有两个问题:

1. 我对DOM/JavaScript的理解是以某种方式存在缺陷还是实际上是如何发生的？
2. 是否有任何jQuery方法允许我对子元素执行操作而不调用与其父元素关联的那些元素？

Answer 1

这被称为事件冒泡,您可以通过以下方式阻止它stopPropagation():

$("img[class=someImg]").click(function(event){
    alert("Image clicked");
    event.stopPropagation();
});

.

1. 我对DOM/JavaScript的理解是以某种方式存在缺陷还是实际上是如何发生的？

那是因为已知的事件冒泡.

2. 是否有任何jQuery方法允许我对子元素执行操作而不调用与其父元素关联的那些元素？

是的,你需要 stopPropagation()