取消父元素的點擊事件

Question

我有div結構。

<div id="parentDiv"> 
    Employee Data 
    <a>Click Here</a> 
</div> 

父div的點擊事件全部準備好由第三方插件註冊，它不受我控制。它在那個div點擊做一些驗證。

我想對點擊錨點標籤'Click Here'執行一些操作，但不想執行驗證，註冊div點擊。

但是，當用戶點擊「員工數據」時，它應該執行驗證，並註冊點擊事件。

我試圖

<a onclick="(arguments[0]||window.event).stopPropagation();">Click Here</a> 
<a onclick="(arguments[0]||window.event).cancelBubble=true;"></a> 

但它取消了自己的點擊事件即錨標記點擊事件。

Answer 1

stopPropagation()正是你所需要的，但是你需要直接在引發的click事件上調用它。你可以做到這一點使用jQuery，像這樣：

$('#parentDiv').click(function() { 
 
    console.log('parent clicked'); 
 
}) 
 

 
$('#parentDiv a').click(function(e) { 
 
    e.stopPropagation(); 
 
    console.log('child clicked'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parentDiv"> 
 
    Employee Data 
 
    <a href="#">Click Here</a> 
 
</div>

或者，您可以使用本機JS是這樣的：

document.querySelector('#parentDiv').addEventListener('click', function() { 
 
    console.log('parent clicked'); 
 
}) 
 

 
document.querySelector('#parentDiv a').addEventListener('click', function(e) { 
 
    e.stopPropagation(); 
 
    console.log('child clicked'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parentDiv"> 
 
    Employee Data 
 
    <a href="#">Click Here</a> 
 
</div>