如何防止單擊內部div點擊事件從外部div

Question

我有2個div與js單擊事件。一個div位於另一個div中。

但我不想要外部div的點擊事件被觸發，如果我點擊內部的一個。我怎樣才能防止呢？

Answer 1

使用event.stopPropagation（）;

像這樣

document.getElementById("#seconddiv").addEventListener("click", function($event){ 
    $event.stopPropagation(); 
}); 

Answer 2

使用event.stopPropagation：

document.getElementById('inner').addEventListener('click', function (event){ 
    event.stopPropagation(); 
    console.log ('Inner div clicked!'); 
}); 

https://jsfiddle.net/4L87qLte/

Answer 3

默認情況下，事件處理的DOM的最低級別開始，您已經定義了處理程序處理目標事件。假設您已經在父鏈中定義了更高級的事件偵聽器來處理同一個事件，如果您不希望事件在您打算處理的層之外處理，則需要stop the propagation of the event：

e.stopPropagation(); 

見時刪除在下面的例子中該行發生了什麼：

document.querySelector('.inner').addEventListener('click', function(e) { 
 
    alert('inner div clicked!'); 
 
    e.stopPropagation(); 
 
}); 
 

 
document.querySelector('.outer').addEventListener('click', function() { 
 
    alert('outer div clicked!'); 
 
});

.outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.inner { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<div class='outer'> 
 
    Outer 
 
    <div class='inner'> 
 
    Inner 
 
    </div> 
 
</div>