当用户多次悬停(mouseenter
)时如何防止冒泡或“失控”。当用户悬停时,我使用slideDown和slideUp作为mouseleave,并将延迟设置为250。只有当延迟设置为1毫秒时,我才能解决此问题。以下是我的脚本:
$("#nav li").mouseenter(function (e) {
e.stopPropagation();
if (!is_opened) {
var left = $(this).position().left;
$(this).children('div').css('left', '-' + left + 'px');
$(this).children('div').slideDown(delay, function () {
// Animation complete.
is_opened = true;
});
}
return false;
});
$("#nav li").mouseleave(function () {
if (is_opened) {
$(this).children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
} else {
setTimeout(function () {
if (is_opened) {
$('#nav li:first-child').children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
}
}, 1000);
}
return false;
});
你可以查看我的JsFiddle here
重现问题
- 多次悬停目录并停止悬停(但将光标指向目录),您会看到下拉菜单将隐藏,但实际上它应该向下滑动。
最佳答案
我认为您的问题是由 is_opened
标志引起的,然后沿边运行的动画更改了 left
css 属性
如果你改变鼠标输入并将js保留为以下内容
$("#nav li").each(function() {
//cache vars for better performance
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
//change div left first so it only changes once
divs.css('left', '-' + left + 'px');
//do mouse enter and leave stuff
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
它应该可以工作:Example
关于javascript - 鼠标悬停多次时 mouseenter 冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23518693/