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

Answer 2

您可以在点击活动中添加stropPropagation。

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

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

jQuery .hover（）或.mouseleave（）不使用chrome

2 个答案: