javascript - mouseenter 事件处理程序在第一次调用该事件时不起作用

Question

我正在编写一个函数，当鼠标进入 DOM 的特定部分以显示菜单时，删除包含内容 display:hidden; 的类。现在，当页面加载并且我最初将鼠标悬停在该区域上时，该事件不会触发。但是，如果我将鼠标移到其上一次，移开，然后移回目标元素。它运行良好并且菜单未隐藏。

代码笔: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 当您将鼠标悬停在框上时返回 undefined (false) 值第一次，这就是为什么它无法 通过条件 - 列表没有出现。

检查codepen ，打开控制台并将鼠标悬停在该框上。第一个日志将是未定义值。

如果您将鼠标悬停在该框上第二次，则会显示该列表，因为 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>