我对 Javascript/jQuery 有点陌生(但不是编程),所以请原谅我对此事的无知。我已经研究过 this question 和 this one ,但都没有解决我的问题。
我的场景:我有一个用 Javascript/jQuery 编写的幻灯片。在此幻灯片中,我希望当用户将鼠标悬停在幻灯片上时显示控件(播放按钮、向后、向前),并在鼠标离开幻灯片区域时隐藏它们。这些按钮按预期显示和隐藏,但是当我将鼠标悬停在其中一个按钮(也在幻灯片上)时,它消失了(我知道这是因为幻灯片上的“mouseleave”)。
我尝试向按钮添加悬停事件处理程序以更改全局 bool 值,以便仅当该 bool 值为 false 时才会隐藏幻灯片控件(意味着未触发其中一个按钮的“mouseenter”)。然后我在“mouseleave”之前注册了“mouseenter”事件,但它不起作用。
问题是这样的:尽管按钮的“mouseenter”事件在幻灯片的“mouseleave”事件之前触发,但事件处理程序回调是在相反的位置执行的。 > 订单。我不完全确定为什么会发生这种情况,但我知道这与 Javascript 中处理悬停事件的方式有关。
我读了一些有关延迟对象的内容,我想知道这是否是解决此问题的正确方法?
语法不正确,但我正在思考以下内容:
function isMouseOverButton() {
if(mouseEnteredButtonEvent()) {
window.isOverButton = true;
} else {
window.isOverButton = false;
}
function hideControls() {
if(!window.isOverButton) {
//hide buttons
}
}
$.when($("#slide").mouseleave()).then(isMouseOverButton()).then(hideControls());
有没有办法像这样组合事件处理程序和延迟对象?或者,有比延迟对象更好的方法吗?
编辑:我刚刚遇到了 this ,但我不想使用插件来完成此任务。
最佳答案
不,这不是这样做的方法!
当鼠标进入幻灯片时,显示控件,当鼠标离开幻灯片时,隐藏控件,除非如果鼠标进入控件。
为此,您将使用一个小的超时并检查鼠标是否在控件被隐藏之前进入控件。
var timer;
$('#slide').on({
mouseenter: function() {
clearTimeout(timer);
$('.controls').show();
},
mouseleave: function() {
timer = setTimeout(function() { //don't hide them right away
$('.controls').hide();
}, 400); // set a timeout
}
});
$('.controls').on({
mouseenter: function() {
clearTimeout(timer); // if the mouse entered the controls,
}, // clear the timeout, keeping the controls visible,
mouseleave: function() {
timer = setTimeout(function() {
$('.controls').hide();
}, 400);
}
});
做同样事情的一种更简单的方法是将控件放置在 HTML 中的 #slide
元素内,这样它们就不会触发 mouseleave 事件,但情况并不总是如此可能,或者方便。
关于javascript - 延迟对象链可以用于事件处理程序吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16500820/