jquery - 单击对象时停止 mouseleave

Question

如果我想鼠标进入一个div，就会显示一个元素，然后当鼠标离开时，元素就会消失。

我在 mouseenter 内有一个单击功能，因此单击时会出现一个下拉菜单。

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

但我想让 mouseleave 函数保持工作状态，这样如果用户鼠标进入 div，该元素就会显示，并且他们可以再次单击它。

我目前有类似的东西，但我只是不知道如何使 mouseleave 在单击时不适用

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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");
});