我有一個 HTML 塊，角落里有一個小 X 圖示。當用戶在此區域內單擊時，我會呼叫一個函式，但在單擊該區域內的 X 時我不想呼叫此函式。這是我的簡化示例：
html:
<ul id="team_members">
<li class="member">
<span>Some text</span>
<span>Some text</span>
<span>Some text</span>
<i class="icon-remove"></i>
</li>
</ul>
jQuery：
$("#team_members").on('click', ".member:not(.icon-remove)", function(e) {
//some code
alert("clicked!");
});
我希望會發生的是，單擊“成員”中的任何位置<li>都會觸發我的 onclick 功能，但是當我單擊“圖示洗掉”時，該功能不會被觸發，因為我希望在那里觸發不同的功能。
uj5u.com熱心網友回復：
您的代碼的問題是您匹配的.member元素不是.icon-remove您想要的元素，而它的子元素.member不是.icon-remove。因此，您只需要在選擇器之間.member和:not(.icon-remove)選擇器中留一個空格：
$("#team_members").on('click', ".member :not(.icon-remove)", function(e) {
//some code
alert("clicked!");
});
$("#team_members").on('click', ".member .icon-remove", function(e) {
//some code
alert("deleted!");
});.icon-remove:after {
content: 'delete';
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="team_members">
<li class="member">
<span>Some text</span>
<span>Some text</span>
<span>Some text</span>
<i class="icon-remove"></i>
</li>
</ul>uj5u.com熱心網友回復：
選擇器字串".member:not(.icon-remove)"仍將匹配.member元素，因此偵聽器仍將運行。檢查點擊的元素 - 目標 - 看看它是否是圖示。
$("#team_members").on('click', function(event) {
if (event.target.matches('.icon-remove')) {
// icon clicked
return;
}
//some code
alert("clicked!");
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/486362.html
標籤：javascript html jQuery
上一篇：函式沒有在打字稿中提取整個陣列值