jQuery .hover() 或 .mouseleave() 在 chrome 上不起作用答案

【问题标题】：jQuery .hover() or .mouseleave() not working on chromejQuery .hover() 或 .mouseleave() 在 chrome 上不起作用
【发布时间】：2017-09-08 19:22:21
【问题描述】：

问题描述：在我的菜单中，.mouseenter() 菜单打开，.mouseleave() 关闭，但如果我点击很多，.mouseleave() 事件就会执行。这只发生在 chrome 浏览器上。

我的菜单中还有其他 .click() 事件，但每次单击都会执行 .mouseleave() 事件。

$(document).ready(function() {
  $("#nav1 li").hover(
    function() {
      $(this).find('ul').slideDown();
    },
    function() {
      $(this).find('ul').slideUp();
    });
});

#nav1 a {
  color: #FFFFFF;
}

#nav1 li ul li a:hover {
  background-color: #394963;
}

div ul li ul {
  background-color: #4a5b78;
  list-style: none
}

#nav1 > li > a {
  padding: 16px 18px;
  display: block;
  border-bottom: 2px solid #212121;
}

#nav1 li ul li a {
  padding: 10px 0;
}

div {
  background-color: #000000;
  background-color: #343434;
  width: 280px;
}
/* Hide Dropdowns by Default */
#nav1 li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul id="nav1">
    <li><a href="#">Hover here and infinite click</a>
    <ul>
      <li><a href="#">Stage1</a></li>
      <li><a href="#">Stage2</a></li>
      <li><a href="#">Stage3</a></li>
      <li><a href="#">Stage4</a></li>
    </ul>
    </li>
    <li><a href="#">Menu Heading 2</a>
      <ul>
      <li><a href="#">Stage1</a></li>
      <li><a href="#">Stage2</a></li>
      <li><a href="#">Stage3</a></li>
      <li><a href="#">Stage4</a></li>
    </ul>
    </li>
</ul>
<div>

尝试点击“悬停在这里无限点击”看看这个问题。

编辑：

正如你们所说，问题出现在这个例子中。这是一个视频：Video link

【问题讨论】：

我没有看到问题。我点击了很多次，没有任何反应。
“我的菜单中有其他的 .click() 事件，但每次点击都会执行 .mouseleave() 事件。” 如果点击事件是影响它，那么您需要在此处包含它，因为您当前的示例没有显示问题
发布click 处理程序...您提到它是问题的一个因素。然后应该张贴。这就是"Minimal, Complete and Verifiable Example" 中“完整”的含义。
@LouysPatriceBessette 他在 StackOverflow 上捕获了这篇帖子的视频，没有点击处理程序
@LouysPatriceBessette 点击次数过多不会出现此问题；它随机发生。所以想象一下：我有一个侧边菜单，它只显示图标，当用户悬停在上面时，我希望打开菜单供他使用，但是当您单击其中一个菜单选项时，它会关闭，这种体验是对用户不利。

标签： javascript jquery google-chrome hover click

【解决方案1】：

当你点击多次浏览器丢失了元素引用，试试这个例子：

        <div id="container">
          <ul id="nav1">
            <li><a href="#">Menu Heading 1</a>
            <ul>
              <li><a href="#">Stage1</a></li>
              <li><a href="#">Stage2</a></li>
              <li><a href="#">Stage3</a></li>
              <li><a href="#">Stage4</a></li>
            </ul>
            </li>
            <li><a href="#">Menu Heading 2</a>
              <ul>
              <li><a href="#">Stage1</a></li>
              <li><a href="#">Stage2</a></li>
              <li><a href="#">Stage3</a></li>
              <li><a href="#">Stage4</a></li>
            </ul>
            </li>
            <li><a href="#">Menu Heading 3</a>
            <ul>
              <li><a href="#">Stage1</a></li>
              <li><a href="#">Stage2</a></li>
              <li><a href="#">Stage3</a></li>
              <li><a href="#">Stage4</a></li>
            </ul>
            </li>
        </ul>
        <div>

CSS

        ul,
        li,
        a {
          padding: 0px;
          margin: 0px;
        }

        .show {
          display: block !important;
        }

        #nav1 a {
          color: #FFFFFF;
        }

        #nav1 li ul li a:hover {
          background-color: #394963;
        }

        div ul li ul {
          background-color: #4a5b78;
          list-style: none
        }

        #nav1 > li > a {
          background-color: #343434;
          padding: 16px 18px;
          text-decoration: none;
          display: block;
          border-bottom: 2px solid #212121;
          background: linear-gradient(top, #343434, #111111);
        }

        #nav1 li ul li a {
          padding: 10px 0;
          padding-left: 30px;
          text-decoration: none;
          display: block;
        }

        div {
          background-color: #000000;
          background-color: #343434;
          width: 280px;
        }
        /* Hide Dropdowns by Default */
        #nav1 li ul {
          display: none;
        }

        $(document).ready(function() {
          $("#nav1 li").hover(
            function(e) {
              let ulMenu = $(this).find('ul');
              ulMenu.addClass('show');
              //$(this).find('ul').slideDown();      
            },
            function(e) {
               if(e.relatedTarget){
                 let ulMenu = $(this).find('ul');
                 ulMenu.removeClass('show');
               } else {
                 console.log('fail ');
               }
              //$(this).find('ul').slideUp();
            });
        });

Codepen Example Works

【讨论】：

代码“if(e.relatedTarget)”解决了我的问题。非常感谢！

【解决方案2】：

您可以在点击事件中添加stropPropagation。

$("#nav1 li").click(
   function(e){
      e.stopPropagation();
   });

也许事件在过程中丢失了，尝试验证它，如果是这样，设置实际元素。看到这个：https://api.jquery.com/event.relatedTarget/

【讨论】：