jQuery .hover（）或.mouseleave（）不适用于Chrome [英] jQuery .hover() or .mouseleave() not working on chrome
问题描述
问题描述：
在菜单中当 .mouseenter（）时，菜单打开，当 .mouseleave（）它关闭了，但是如果我点击了很多，就会执行 .mouseleave（）事件。
这只发生在Chrome浏览器上。
我的菜单中有其他的 .click（）事件，但每做一次点击， .mouseleave（）事件都是执行。
＃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> {padding：16px 18px;显示：块; border-bottom：2px solid＃212121;}＃nav1 li ul li a {padding：10px 0;} div {background-color：＃000000; background-color：＃343434; * /＃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 =＃>将鼠标悬停在此处并无限点击< / 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>< a href =＃>菜单标题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>
>尝试点击悬停在这里和无限点击看到这个问题。
编辑：
正如你们所说的，在这个例子中会出现问题。
以下是一段视频：视频链接
当您多次点击浏览器丢失元素引用时，请尝试以下示例： $ p> < div id =container>
< ul id =nav1>
< li>< a href =＃>选单标题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 =＃>菜单标题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 =＃>菜单标题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>
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;
背景：线性渐变（顶部，＃343434，＃111111）;
}
＃nav1 li ul li a {
padding：10px 0;
padding-left：30px;
text-decoration：none;
display：block;
}
div {
background-color：＃000000;
背景颜色：＃343434;
width：280px;
}
/ *默认隐藏下拉菜单* /
＃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（）;
$，
函数（e）{
if（e.relatedTarget）{
let ulMenu = $（this）.find（'ul'）;
ulMenu.removeClass （'show'）;
} else {
console.log（'fail'）;
}
//$(this).find('ul').slideUp （）;
}）;
}）;
Problem description:
In my menu when .mouseenter() the menu opens and when .mouseleave() it closes, but if i click a lot , the .mouseleave() event is executed.
This only happened on chrome browser.
I have other .click() events inside my menu, but every click I made, the .mouseleave() event is execute.
$(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>
Try click "Hover here and infinite click" to see this problem.
EDIT:
As you guys said, the problem occurs in this example. Here is a video: Video link
When you click many times the browser has lost the element reference, try this example:
<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();
});
});
这篇关于jQuery .hover（）或.mouseleave（）不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
