单击对象时停止 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");
});

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();
    }

});

Answer 3

如果您使用 1.7+，您可以使用 jQuery 的新开/关方法，

例如：

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

Fiddle: http://jsfiddle.net /fSjtm/

可能需要一些调整，但它会给你一个总体想法。

Answer 4

使用 event.stopPropagation();

这更好，因为您可以在元素上使用链接

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

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

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

.element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; }
.dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='div'>HERE
   <div class='element'>
      boxed element
   </div>
   <div class='dropdown'>
      menu
   </div>
</div>

Answer 5

看来您提到的 mouseleave 事件是由 jquery 单击自定义触发的，而不是原始的 mouseEvent。试试这个：

$(".div").on('mouseenter', function(){
    $(".element").on('click', function(){ ...  });
});

$(".div").on('mouseleave', function(event){
    if(typeof(e.originalEvent) != 'undefined'){
      // only when mouseleave is the original event.
    }
});