单击对象时停止鼠标悬停 [英] stop mouseleave when clicked on an object

问题描述

如果我想要mouseenter一个div，一个元素将显示，然后当mouseleave，元素消失。

If I want to mouseenter a div, an element will show, then when mouseleave, element disappears.

我有一个鼠标内部的点击功能，

I have a click function inside the mouseenter so theres a drop down menu when clicked.

我想要下拉菜单和元素即使在鼠标时保持活动。所以我想要mouseleaves不适用在这种情况下，当有一个点击事件。用户必须再次点击元素或页面上的任何位置，使元素和下拉菜单消失。

I want the dropdown menu and the element to stay active even when mouseleaves. So I want mouseleaves to not be applicable in this situation, when there's a click event. User will have to click on the element again or anywhere on the page to make the element and dropdownmenu disappear.

但我想保持mouseleave功能工作，所以如果用户鼠标div，元素会显示，他们可以再次点击它。

But I want to keep mouseleave function working so if user mouseenters a div, the element will show and they can click on it again.

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

I currently have something like this, but I just dont know how to make the mouseleave to not be applicable when clicked

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

推荐答案

您可以设置一个自定义属性，点击。 mouseleave事件处理程序可以在隐藏元素之前检查此自定义属性的值。

You can set a custom attribute for marking the item as clicked. The mouseleave event handler can check the value of this custom attribute before hiding the element.

类似的东西：

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

});

这篇关于单击对象时停止鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！