Question

我创建了使用鼠标输入和鼠标离开功能显示给定列表中的子列表的功能，这很好地显示了子列表，但是我需要在子列表中单击（收藏夹图标），当单击图标时，onmouseleave是触发，图标上的点击事件也被触发，但是我需要单击时仍显示子列表，这是我的代码

$.fn.hideListGroup = function(id){
    if ($("#sub_list_group_"+id+"").is(':visible')){
        $("#sub_list_group_"+id+"").slideUp('fast');
    }
}

$.fn.showListGroup = function(id, el, thisel) {
    if (!$("#sub_list_group_"+id+"").is(':visible')){
        $("#sub_list_group_"+id+"").slideDown('fast');
    }
};

此事件是从ajax结果调用的

<li onMouseenter="$(this).showListGroup("+id+");" onMouseleave="$(this).hideListGroup("+id+");"></li>

以及单击子列表时的功能

// clicked sub list
$(document).on("click", ".sidebar-land-groups i", function(e){
    e.stopPropagation();
    /* favorited function */
});

如何使子列表元素在单击时不滑动？我添加了e.stopPropagation();，但无法正常工作。

Answer 1

您可以为图标添加mouseleave和mouseenter事件处理程序，并使用e.stopPropagation以便不会触发父级的鼠标事件

$(document).on("mouseenter mouseleave", ".sidebar-land-groups i", function(e){
    e.stopPropagation();
});

为什么单击子元素时触发鼠标离开

1 个答案: