如何將事件stopPropagation限制爲祖先元素？

Question

是否有可能停止傳播到某個祖先元素！

但是，我們可以做到這一點 - 通過在父母本身中添加event.stopPropagation()來處理該事件，但這可能會阻止某些情況。

Answer 1

您可以檢查事件的目標，並僅停止那些來自您希望停止傳播的元素。
（如果你使用jQuery的，它可以更容易地做到不知道用js的更好的方法。）

如果（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>