如何将事件stopPropagation限制为祖先元素

Question

是否可以停止传播到某个祖先元素！

然而，我们可以这样做——通过在该事件的父级中添加event.stopPropagation()，但这可能会阻止某些情况。

Answer 1

您可以检查事件的目标，并仅停止那些来自您希望停止传播的元素的事件
（如果你使用jquery，它可以更容易地完成。不知道使用js的更好方法。）

if（event.target=document.getElementById（'elementToBlock'））event.stopPropagation（）；

通过这种方式，其他事件仍在传播
如果您有很多元素，并且不想向它们添加公共类，那么也可以将它们分组在div中，并停止所有从那里传播的事件
用jquery做了一个样本：

$('#dontPropagateThroughHere').on('click', '.dontPropagate', function(event) {
  event.stopPropagation();
  alert('Stopped by dontPropagateThroughHere');
})
$('#propagationBlocker').on('click', function(event) {
  event.stopPropagation();
  alert('Stopped by propagationBlocker');
})
$('#eventsThatGotThrough').on('click', function(event) {
  alert('Event got through');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='eventsThatGotThrough'>
  <div id="dontPropagateThroughHere">
    <div id="propagationBlocker">
      <div>Don't propagate inside blokker div</div>
      <div>Don't propagate inside blokker div</div>
      <div>Don't propagate inside blokker div</div>
    </div>
    <br/>
    <div class="dontPropagate">Don't propagate</div>
    <div class="dontPropagate">Don't propagate</div>
    <div class="dontPropagate">Don't propagate</div>
    <br/>
    <div>Let me propagate</div>
    <div>Let me propagate</div>
    <div>Let me propagate</div>
  </div>
</div>