jQuery .hover() 或 .mouseleave() 在 chrome 上不起作用
问题描述:在我的菜单中，当 .mouseenter() 菜单打开，当 .mouseleave() 关闭时，但如果我点击很多，.mouseleave() 事件被执行.这只发生在 chrome 浏览器上.
我的菜单中有其他 .click() 事件，但每次点击，.mouseleave() 事件都会执行.
$(document).ready(function() {$("#nav1 li").hover(功能() {$(this).find('ul').slideDown();},功能() {$(this).find('ul').slideUp();});});#nav1 a {颜色:#FFFFFF；}#nav1 li ul li a:hover {背景颜色:#394963；}div ul li ul {背景颜色:#4a5b78；列表样式:无}#nav1 >李>一个 {填充:16px 18px；显示:块；边框底部:2px 实心 #212121;}#nav1 li ul li a {填充:10px 0；}分区 {背景颜色:#000000；背景颜色:#343434；宽度:280 像素；}/* 默认隐藏下拉菜单 */#nav1 li ul {显示:无；}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></脚本><div id="容器"><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><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>尝试点击悬停在这里无限点击"来查看这个问题.
正如你们所说，问题出现在这个例子中.这是一个视频:视频链接
解决方案当你点击多次浏览器丢失了元素引用，试试这个例子:
<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>CSS
ul,李，一个 {填充:0px；边距:0px；}.展示 {显示:块！重要；}#nav1 一个 {颜色:#FFFFFF；}#nav1 li ul li a:hover {背景颜色:#394963；}div ul li ul {背景颜色:#4a5b78；列表样式:无}#nav1 >李>一个 {背景颜色:#343434；填充:16px 18px；文字装饰:无；显示:块；边框底部:2px 实心 #212121;背景:线性渐变(顶部，#343434，#111111)；}#nav1 li ul li a {填充:10px 0；左边距:30px；文字装饰:无；显示:块；}分区 {背景颜色:#000000；背景颜色:#343434；宽度:280 像素；}/* 默认隐藏下拉菜单 */#nav1 li ul {显示:无；}JS
$(document).ready(function() {$("#nav1 li").hover(功能(e){让 ulMenu = $(this).find('ul');ulMenu.addClass('show');//$(this).find('ul').slideDown();},功能(e){如果(e.relatedTarget){让 ulMenu = $(this).find('ul');ulMenu.removeClass('show');} 别的 {console.log('失败');}//$(this).find('ul').slideUp();});});Codepen 示例作品
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();
});
});
Codepen Example Works
相关文章