Question

我对Javascript / jQuery有些新手（但不是编程），所以请原谅我对此事的无知。我已经查看了this question和this one，但没有人解决我的问题。

我的方案：我有一个用Javascript / jQuery编写的幻灯片。在此幻灯片中，我想在用户将鼠标悬停在幻灯片上时显示控件（播放按钮，向后，向前），并在鼠标离开幻灯片区域时隐藏它们。按钮按预期显示和隐藏，但是当我将鼠标悬停在其中一个按钮上时（也在幻灯片上方），它会消失（我知道这是因为幻灯片上的“mouseleave”）。

我尝试将悬停事件处理程序添加到我的按钮以更改全局布尔值，以便只有在布尔值为false时才会隐藏幻灯片控件（意味着其中一个按钮的“mouseenter”未被触发）。然后我在“mouseleave”之前注册了“mouseenter”事件，但它没有用。

以下是问题：尽管在幻灯片的“mouseleave”事件之前触发了按钮的“mouseenter”事件，但事件处理程序回调在对面执行订单。我不完全确定为什么会发生这种情况，但我知道它与如何在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，但我不想使用插件来完成此任务。

Answer 1

不，这不是办法！

当鼠标进入幻灯片时，显示控件，当鼠标离开幻灯片时，如果鼠标进入控件，则隐藏除之外的控件。

要执行此操作，您将使用较小的超时并检查鼠标是否在隐藏之前进入控件。

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);
    }
});

FIDDLE

更容易做同样事情的方法是将控件放在HTML中的#slide元素内，这样他们就不会触发mouseleave事件，但这并不总是可行或方便

可以在事件处理程序上使用延迟对象链吗？

1 个答案: