Javascript jQuery.hover（）或.mouseleave（）不适用于chrome

问题描述： 在我的菜单中，当

.mouseenter（）

时，菜单打开，当

.mouseleave（）

时，它关闭，但如果我多次单击，则执行

.mouseleave（）

事件。 这只发生在chrome浏览器上

我的菜单中还有其他

.click（）

事件，但每次单击都会执行

.mouseleave（）

事件

$（文档）.ready（函数（）{
$（“#nav1 li”）。悬停(
函数（）{
$（this.find（'ul'）.slideDown（）；
},
函数（）{
$（this.find（'ul'）.slideUp（）；
});
});
#导航1 a{
颜色：#FFFFFF；
}
#nav1 li ul li a:悬停{
背景色#394963；
}
迪乌尔李乌尔酒店{
背景色：#4a5b78；
列表样式：无
}
#nav1>li>a{
填充：16px 18px；
显示：块；
边框底部：2个实心#212121；
}
#nav1 li ul li a{
填充：10px0；
}
div{
背景色：#000000；
背景色：#3434；
宽度：280px；
}
/*默认情况下隐藏下拉列表*/
#nav1-li-ul{
显示：无；
}



















您可以在单击事件中添加一个
stroproperation

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

可能事件在过程中丢失了，请尝试验证它，如果是，请设置实际元素。
请参见：
当您多次单击浏览器时，浏览器已丢失元素引用，请尝试以下示例：

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

JS

我看不出有什么问题。我多次单击它，但什么也没有发生。“我的菜单中还有其他.click（）事件，但每次单击一次，都会执行.mouseleave（）事件。”如果单击事件影响到它，那么您需要在这里包括它，因为您当前的示例没有显示问题发布
单击
处理程序。。。你提到这是问题的一个因素。然后应该将其张贴。这就是“完整”在中的含义。@Louyspatricebesette他在StackOverflow上捕获了这篇文章中的视频，没有点击handler@LouysPatriceBessette点击次数过多时不会出现此问题；它是随机发生的。想象一下：我有一个侧菜单，它只显示图标，当用户悬停在上面时，我希望菜单打开供他使用，但当你点击其中一个菜单选项时，它关闭，这种体验对用户来说并不好。代码“if（e.relatedTarget）”解决了我的问题。谢谢！
        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();
            });
        });