JQuery選擇器：當某個孩子沒有被點擊時，將規則應用到元素

Question

所以我有一個父div與內部不同的元素。現在我已經設置了它，所以當父母div被點擊時，它會應用一個「選定的」CSS屬性（只是突出顯示它）。然而，這個div內有一個錨標記，我不想讓div突出顯示錨是否被點擊。

我的代碼突出DIV

$(document).on("click",".playlist-row",function() { 
     var selected = $(this); 
     highlight(selected); 
}); 

理想情況下，我希望它這樣的表現：（只是僞代碼）

$(document).on("click",".playlist-row",function() { 
    var selected = $(this); 
    if ($(".childElement) is not the part clicked) { 
     selectSongInPlaylist(selected); 
    } 
}); 

任何優雅的方式來得到這樣的工作嗎？

Answer 1

需要防止點擊事件冒泡至容器

捕獲的事件並使用event.stopPropagation

$(document).on('click', "a", function(event){ 
    event.stopPropagation(); 
}); 

Answer 2

我會認爲我明白你的問題，所以這裏就是我可能會做：

$(document).on("click", ".playlist-row", function(e) { 
    if (!$(e.currentTarget).is("a")) { 
     selectSongInPlaylist($(this)); 
    } 
} 

Answer 3

你可以使用stopPropogation（）作爲http://api.jquery.com/event.stopPropagation/對孩子的元素，如$（ '是childElement'）。點擊（函數（E）{ e.stopPropagation（）; }）;以防止點擊事件傳播到父元素。您還可以按照此處所述檢查event.target屬性http://api.jquery.com/event.target/