javascript - jQuery .hover() 或 .mouseleave() 不适用于 chrome

Question

问题描述:在我的菜单中，.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

Answer 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;
        }

JS

        $(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