如何防止单击内部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>