javascript - 如何选择一个div的其余部分？

Question

我有问题

<div id='parent'>
  <div id='child'>
  </div>
</div>

我想要的是当孩子被点击 addClass 时，当父母的其余部分被点击 removeClass 时，所以当我尝试做

$('#child').click(function(){
  $(this).addClass();
})
$('#parent').click(function(){
  $('#child').removeClass();
})

它不工作我认为这是因为孩子实际上是在父母里面，所以当孩子被点击时，父母点击了吗？

那我该怎么做呢？

score 5 · Accepted Answer

尝试这个：

$('#child').click(function(evt){
  evt.stopPropagation();
  $(this).addClass("myClass");
});

score 2 · Accepted Answer

您可以使用event.stopPropagation来防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到该事件的通知。

$('#child').click(function(e){
  e.stopPropagation();
  $(this).addClass();
});

score 0 · Accepted Answer

一些用户已经提出了一个很好的解决方案——这里解释了它的工作原理：

当您单击一个 HTML 元素（实际上是一个 DOM 对象...）时，单击事件会一直“冒泡”到根元素。例如，正如您预期的那样，点击#child也会触发点击。#parent

要停止这种行为，您需要调用.stopPropagation()click 事件 - 这将告诉浏览器您不希望该事件传播，但将其保持为“本地”。基本上，当您在这里处理它时，您已经完成了它并且不想再次看到它。

方便地，jQuery 事件处理程序将事件作为第一个参数，因此如果您使用签名分配任何函数，您可以按照其他人的建议function (e) { ... }停止事件传播。e.stopPropagation();在你的情况下，你想要

$('#child').click(function(e){
  $(this).addClass();
  e.stopPropagation();
});
$('#parent').click(function(){
  $('#child').removeClass();
});

3 回答 3