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

你可以像http://api.jquery.com/event.stopPropagation/一样在子元素上使用stopPropogation（），例如$（'。childElement'）。click（function（e）{ e.stopPropagation（）; }）;防止click事件传播到父元素。您还可以按照http://api.jquery.com/event.target/

中所述检查event.target属性

Answer 2

您需要阻止点击事件冒泡到容器

捕获事件并使用event.stopPropagation

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

Answer 3

我会假设我理解你的问题，所以这就是我可能会做的事情：

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

JQuery选择器：在未单击某个子项时将规则应用于元素

3 个答案: