jQuery .hover（）或.mouseleave（）没有使用chrome
问题描述：在我的菜单中，当.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; }
尝试点击“hover在此处并无限点击”以查看此问题。
编辑：
正如你们所说，问题出现在这个例子中。 这是一段video： video链接
当您多次单击浏览器丢失了元素引用时，请尝试以下示例：
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示例作品
您可以在click事件中添加stropPropagation 。
$("#nav1 li").click( function(e){ e.stopPropagation(); });
也许事件在这个过程中迷失了，试着validation它，如果这样设置了实际的元素。 看到这个： https ： //api.jquery.com/event.relatedTarget/
Interesting Posts