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

Can Deferred object chains be used on event handlers?

本文关键字：对象 延迟 事件处理 程序上      更新时间：2023-09-26

我对Javascript/jQuery有点陌生(但不是编程)，所以请原谅我对这件事的无知。我已经看了这个问题和这个问题，但是没有一个能解决我的问题。

我的场景:我有一个用Javascript/jQuery编写的幻灯片。在这个幻灯片中，我希望在用户将鼠标悬停在幻灯片上时显示控件(播放按钮、后退按钮、前进按钮)，并在鼠标离开幻灯片区域时隐藏它们。按钮按预期显示和隐藏，但当我将鼠标悬停在其中一个按钮(也在幻灯片上)时，它就消失了(我知道这是因为"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());

是否有这样的组合事件处理程序和延迟对象?或者，有比延迟对象更好的方法吗?

编辑:我刚刚遇到这个，但我不喜欢使用插件来完成这个

不，这不是这样做的!

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

要做到这一点，您将使用一个小超时，并检查鼠标是否在隐藏之前进入控件。

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事件，但这并不总是可能的，也不方便。

相关文章：