单击对象时停止mouseleave

Question

如果我想鼠标输入div,则会显示一个元素,然后当mouseleave,元素消失时.

我在mouseenter中有一个click功能,所以点击时会出现一个下拉菜单.

我希望下拉菜单和元素即使在mouseleaves时也能保持活动状态.因此,当有点击事件时,我希望鼠标在这种情况下不适用.用户必须再次单击该元素或页面上的任何位置,以使元素和下拉菜单消失.

但是我想保持mouseleave功能正常工作,所以如果用户鼠标移动div,元素将显示,他们可以再次点击它.

我目前有这样的东西,但我不知道如何使鼠标在点击时不适用

$(".div").mouseenter(function(){
    $(".element",this).show();
    $(".element").click(function(){
        $(".dropdown").show();
        return false;
    });
}).mouseleave(function(){
    $(".element",this).hide();
});

编辑:

HTML

<div class='div'>
   <div class='element' style='display:none;'>
      boxed element
   </div>
   <div class='dropdown' style='display:none;'>
      menu
   </div>
</div>

Answer 1

这对我有用

$("#id").click(function(){
     $("#id").off("mouseleave");
});

Answer 2

您可以设置自定义属性来将项目标记为已单击。mouseleave 事件处理程序可以在隐藏元素之前检查此自定义属性的值。

即类似：

$(".div").mouseenter(function(){
    $(".element",this).show();
    $(".element").click(function(){
        $(".dropdown").show();

        // set custom attribute for marking this one as clicked
        $(this).attr('clicked', 'yes'); 

        return false;
    });
}).mouseleave(function(){

    // check custom attribute before hiding the element
    if($(this).attr('clicked') != 'yes') {
        $(".element",this).hide();
    }

});