使用JavaScript/jQuery区分父元素和子元素之间的单击事件

Question

我有两个嵌套元素，称为“blanket”和“blanket-content”，我想仅识别对父元素的点击。

<div id="blanket">
    <div id="blanket-content"></div>
</div>

我遇到的问题是，当我点击子元素时，会触发父元素的点击事件。我尝试了不同的方法，但都没有成功。

我已经尝试了以下方法来调整我的代码：

$('#blanket').on('click', function(ev) {
    alert(ev.currentTarget.id); //
});

^ 这会触发 div 的点击事件，即使子元素被点击时也会保留其父级 id。

$('#blanket-content').on('click', function(ev) {
        alert(ev.currentTarget.id);
});

^ 这不会触发任何操作

我的目标是当我点击 blanket-content 时不会发生任何事情，但当我点击 blanket 时，我想要执行一些操作。

- Joseph118

---

可能是Jquery：父元素和子元素中的点击事件的重复问题。 - Manoj Dhiman

你能在 jsfiddle 上发布代码吗？因为它在 https://jsfiddle.net/92jwad1w/ 上可以运行。 - Umesh Sehta

@UmeshSehta 我遇到了一个 CSS 问题，导致 jQuery 的 onclick 效果无法生效。 - Joseph118

@Joseph118，但我没有得到CSS？CSS部分是空的。 - Umesh Sehta

@UmeshSehta 抱歉，我可能给了你错误的链接，这是正确的链接：http://jsfiddle.net/3gLe7gfz/4/。 - Joseph118

Answer 1

无需做更多。只需在#blanket-content点击事件中添加ev.stopPropagation();即可。

<div id="blanket">PARENT
    <div id="blanket-content">CHILD</div>
</div>


$('#blanket').on('click', function(ev) {
    alert(ev.currentTarget.id); //
});


$('#blanket-content').on('click', function(ev) {
    ev.stopPropagation();
    alert(ev.currentTarget.id);
});

请点击此处查看：https://jsfiddle.net/92jwad1w/

- Umesh Sehta

Answer 2

一种简单的解决方法是在 blanket-content 的点击处理程序中停止事件传播，以便触发父元素的点击处理程序。您可以使用Event.stopPropagation() 来完成这个操作。

$('#blanket').on('click', function(ev) {
  alert(ev.currentTarget.id); //
});


$('#blanket-content').on('click', function(ev) {
  ev.stopPropagation()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blanket">blanket
  <div id="blanket-content">blanket-content</div>
</div>

另一种解决方法(为什么)是在blanket点击处理程序中检查点击是否发生在blanket-content元素内。

$('#blanket').on('click', function(ev) {
  if (!$(ev.target).closest('#blanket-content').length) {
    alert(ev.currentTarget.id); //
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blanket">blanket
  <div id="blanket-content">blanket-content</div>
</div>

- Arun P Johny

---

到目前为止，我在使用stopPropagation()时没有成功，而且点击事件也没有在#blanket-content中触发。 - Joseph118

#blanket-content 是否动态创建？ - Arun P Johny

@ArunPJohny，我已经更新了你给我的链接，请看一下。在使用 CSS 进行修改后它不起作用了。 - Joseph118

@Joseph118，这是因为您已经为“blanket-content”设置了“pointer-events: none”，这会阻止子元素的点击事件被触发。 - Arun P Johny

@ArunPJohny，我找到了问题所在，为什么它没有被触发...我在我的CSS中有pointer-events: none;。我之前已经删除过它了，可能是撤销到某个特定点时又回来了。 - Joseph118

Answer 3

尝试阻止默认操作，如果仍在引用，则停止传播并不总是有效的。

$('#blanket').on('click', function(event){
    $(event).preventDefault();
});

这将停止点击事件的默认操作，并且可以正常工作。

如需更多信息，请前往此处。

- Ronnie