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>

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

1 个答案: