mouseenter事件處理程序在第一次調用該事件時不起作用

Question

我正在編寫一個函數來刪除內容為display:hidden;的類display:hidden; 當鼠標進入DOM的特定部分以顯示菜單時。 現在，當頁面加載並且我最初將鼠標懸停在該區域上時，該事件不會觸發。 但是，如果我一次將鼠標移到它上面，請先移開，然后再移回目標元素。 可以正常啟動，並且菜單未被隱藏。

codepen： http ：//codepen.io/anon/pen/EWYevq

jQuery的：

$(document).ready(function() {
      $('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
        window.k = setTimeout(function(){
           $('.hidden-dropdown').addClass("hide_k");
        }, 250)
      }).mouseenter(function(e) {
        if(window.k){
          console.log("test")
          clearTimeout(window.k)
          $(".hidden-dropdown").removeClass("hide_k");
        }
      });
    })

Answer 1

編輯 ：即使將window.k與任何內容進行比較，它也可以工作。 我非常懷疑這種條件在這里是否必須。

在您的特定情況下：

當您第一次將window.k懸停在框上時， window.k返回的是undefined （false）值，這就是它無法通過條件的原因-列表未出現。

檢查codepen ，打開控制台並懸停該框。 第一個日志將是undefined值。

如果您第二次將鼠標懸停在該框上，則會出現該列表，因為window.k已在mouseleave()函數中設置-從現在開始它不會返回undefined （false）。

工作解決方案：

 $(document).ready(function() { $('#kDropdown, .hidden-dropdown').mouseleave(function(e) { window.k = setTimeout(function() { $('.hidden-dropdown').addClass("hide_k"); }, 250); }).mouseenter(function(e) { console.log("test") clearTimeout(window.k) $(".hidden-dropdown").removeClass("hide_k"); }); }) 

 .hide_k { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='kDropdown' style="background-color: black; height: 100px; width: 100px;"></div> <div class="hide_k hidden-dropdown"> <ul> <li>LIST</li> <li>THAT</li> <li>IS</li> <li>HIDDEN</li> </ul> </div> 

Answer 2

您確定需要此行嗎？

if(window.k) {

首次輸入時，未分配該變量，因此不會觸發該事件。 如果刪除該行，效果將達到預期效果。

Answer 3

它不是第一次觸發，因為還沒有window.k 。

一旦mouseleave它得到分配。 所以從第二次在病房開始工作。

要完成這項工作，請移動$(".hidden-dropdown").removeClass("hide_k"); 在if(window.k)條件之外。

這是工作中的代碼筆

 $(document).ready(function() { $('#kDropdown, .hidden-dropdown').mouseleave(function(e) { window.k = setTimeout(function() { $('.hidden-dropdown').addClass("hide_k"); }, 250) }).mouseenter(function(e) { if (window.k) { clearTimeout(window.k) } $(".hidden-dropdown").removeClass("hide_k"); }); }) 

 .hide_k { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='kDropdown' style="background-color: black; height: 100px; width: 100px;"></div> <div class="hide_k hidden-dropdown"> <ul> <li>LIST</li> <li>THAT</li> <li>IS</li> <li>HIDDEN</li> </ul> </div> 

Answer 4

第一次不起作用的原因是因為您尚未設置window.k。 更改此：

$('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
    window.k = setTimeout(function(){

對此：

window.k=true;
$('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
        window.k = setTimeout(function(){

發生的情況是，您正在檢查mouseenter上的if（window.k）{}，並且當第一個“ enter”發生時，尚未發生任何設置window.k的mouseleave。 因此，您的if（window.k）簽入mouseenter第一次返回false。 但是隨后您離開該框，設置了window.k，然后從那里開始工作，因為您的if（window.k）語句然后返回true（因為第一個mouseleave事件最終對其進行了設置）。 希望有道理！ 基本上，這是一個計時問題，您只需要在執行其他任何操作之前將window.k = true設置為即可。