當單擊對象時停止mouseleave

如果我想讓鼠標輸入一個div，則會顯示一個元素，然後在mouseleave時元素消失。當單擊對象時停止mouseleave

我在鼠標中心有一個點擊功能，所以點擊下拉菜單。

我想要下拉菜單和元素保持活動狀態，即使在鼠標葉。所以我希望mouseleaves在這種情況下不適用，當發生點擊事件時。用戶必須再次點擊該元素或頁面上的任何位置才能使元素和下拉菜單消失。

但我想保持mouseleave函數工作，所以如果用戶mouseenter一個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>

來源

2011-12-25 hellomello

我覺得它不是一個正確的方法.. – 2011-12-25 08:16:04

請一些一段HTML代碼 – 2011-12-25 08:23:14

您可以設置用於將項目標記爲單擊的自定義屬性。 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(); 
    } 

});

來源

2011-12-25 09:53:52 techfoobar

你可以使用jQuery的新的開/關方法，如果你使用1.7+

類似於：

$(".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，但它會給你一個總體思路。

來源

2011-12-25 08:35:30 adeneo

這奏效了，我

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

來源

2014-02-10 18:19:35

這是一個非常簡單而直觀的方法來解決這個問題。 – DrewT 2015-02-03 22:26:53

使用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>

來源

2015-10-20 07:58:29 Mex

看來你是指，是定製由jQuery的點擊，而不是原來的MouseEvent觸發MouseLeave事件上使用的鏈接。試試這個：

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

來源

2017-05-30 08:51:03

當單擊對象時停止mouseleave

回答

相關問題