第一次调用事件时，mouseenter事件处理程序不起作用(mouseenter event handler does not work the first time the event is cal

编程入门行业动态更新时间:2024-10-27 00:31:54

第一次调用事件时，mouseenter事件处理程序不起作用(mouseenter event handler does not work the first time the event is called)

我正在编写一个函数来删除一个内容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"); } }); })

I am writing a function to remove a class with the contents display:hidden; when the mouse enters a certain part of the DOM to show a menu. Now, when the page loads and I initially hover over the area, the event doesn't fire. BUT, if I move my mouse on it once, move away, then move back to the targeted element. It fires fine and the menu is unhidden.

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

jQuery:

最满意答案

编辑：即使将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> 
  
 
Edit: It works even if the window.k is compared to anything. I highly doubt if this condition is obligatory here.  
 
 In your particular case:  
window.k was returning 
undefined (false) value when you were hovering the box for the first time, that's why it was unable to 
pass the condition - the list was not appearing. 
 
Check codepen, open the console and hover the box. The first log will be the undefined value. 
If you hover the box for the second time, the list will appear because window.k is already set inside the mouseleave() function - it won't return undefined (false) from now on. 
 The working solution: 
 
 
  
  $(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>