使用javascript/jquery區分父級和子級之間的點擊

Question

我有2個嵌套的被稱爲毯子和毯子內容的元素，我想識別對父級單獨完成的點擊。

<div id="blanket"> 
    <div id="blanket-content"></div> 
</div> 

我遇到的問題是，當我點擊孩子時它觸發父母點擊。我嘗試過不同的方法，但我沒有成功。 我已經試過這些玩我的代碼;

$('#blanket').on('click', function(ev) { 
    alert(ev.currentTarget.id); // 
}); 

^這會觸發正常點擊div，並且即使在單擊子元素時也會聲明父級ID。

$('#blanket-content').on('click', function(ev) { 
     alert(ev.currentTarget.id); 
}); 

^這不會觸發任何

當我點擊毯內容什麼都不會發生什麼我要實現的是，但是當我點擊的毯子，我想要做的事。

Answer 1

一個簡單的解決方案是在blanket-content的點擊處理程序中停止事件傳播，以便它將觸發父元素的點擊處理程序。

您可以使用Event.stopPropagation()做

$('#blanket').on('click', function(ev) { 
 
    alert(ev.currentTarget.id); // 
 
}); 
 

 

 
$('#blanket-content').on('click', function(ev) { 
 
    ev.stopPropagation() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="blanket">blanket 
 
    <div id="blanket-content">blanket-content</div> 
 
</div>

---

另一種解決方案（why）是檢查點擊是否發生在blanket-content元素blanket點擊處理程序中

$('#blanket').on('click', function(ev) { 
 
    if (!$(ev.target).closest('#blanket-content').length) { 
 
    alert(ev.currentTarget.id); // 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="blanket">blanket 
 
    <div id="blanket-content">blanket-content</div> 
 
</div>

Answer 2

沒有必要做更多。只需添加ev.stopPropagation（）;在＃blanket-content點擊事件裏面。

<div id="blanket">PARENT 
    <div id="blanket-content">CHILD</div> 
</div> 


$('#blanket').on('click', function(ev) { 
    alert(ev.currentTarget.id); // 
}); 


$('#blanket-content').on('click', function(ev) { 
    ev.stopPropagation(); 
    alert(ev.currentTarget.id); 
}); 

入住這裏：https://jsfiddle.net/92jwad1w/

Answer 3

嘗試阻止默認操作，停止傳播史，如果仍然被引用它並不總是工作。

$('#blanket').on('click', function(event){ 
    $(event).preventDefault(); 
}); 

這將停止單擊事件的默認操作，並且可以正常工作。

的更多信息，請 here

的