在对象上单击时停止鼠标离开

Question

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

我有一个点击功能里面的鼠标输入，所以有一个下拉菜单时，点击。

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

但是我希望保持mouseleave功能的正常工作，这样如果用户鼠标进入一个div，元素就会显示出来，他们可以再次点击它。

我目前有这样的东西，但我只是不知道如何使鼠标离开时不适用时，点击

​

$(".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

您可以设置一个自定义属性，用于将项目标记为已单击。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();
    }

});

Answer 2

这对我来说很管用

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

Answer 3

如果您使用的是1.7+，则可以使用jQuery的新on/off方法

类似于：

$(".div").on('mouseenter', function(){
    showElm();
    $(".element").click(function(){
        $(".div").off('mouseleave', hideElm);
        $(".dropdown").show();
        return false;
    });
});

$(".div").on('mouseleave', hideElm);
$(document).on('click', hideElm);

function hideElm() { $(".element, .dropdown").hide(); }
function showElm() { $(".element").show(); }

小提琴：http://jsfiddle.net/fSjtm/

可能需要一些tweeking，但它会给你一个大概的想法。