javascript - jQuery - 如何监听鼠标离开屏幕区域

Question

在我正在处理的应用程序中，我在长段落中使用 span 标签来提供:

• 一个可点击的链接，用 Javascript 处理，以及

• 鼠标悬停时，“编辑此”按钮显示在链接的一侧(具有与点击不同的功能)。

在鼠标悬停时放置和显示“编辑此”按钮相对容易。我想弄清楚的是，如何才能正确隐藏 mouseleave 上的按钮？

查看我的工作示例:http://jsfiddle.net/nrabinowitz/6uKk8/4/

问题:

• 我不能只在 span 上使用 mouseleave 事件，因为那样会在按钮被点击之前隐藏它。

• 我不能使用透明的 div 大小来包含 span 和按钮，因为如果 div 是在跨度上方，它会阻止 click 事件，如果我使用 z-index 将 div 放在段落下方，它不会似乎根本没有收到 mouseleave 事件。

我可能会在整个段落中使用 mousemove 来添加一些东西，但这看起来真的很难看。我不认为我可以使用某种协调的事件处理来检查 span 和 button 上的 mouseleave，因为它们之间有空格他们。

我想要的行为是有一个(基于 DOM 或计算的)不可见框，其中包括 span 和按钮，并监听鼠标离开该框，此时我可以隐藏按钮。这样做的正确方法是什么？

Answer 1

您可以将隐藏放在计时器上，并在鼠标离开您的 <span> 时启动计时器:

var timer = null;
$('span.editable').mouseleave(function() {
    if(timer)
        clearTimeout(timer);
    timer = setTimeout(function() {
        $('#edit-this').hide();
        timer = null;
    }, 2000);
});

然后在鼠标进入#edit-this时取消定时器并设置一个一次性事件处理程序来隐藏 #edit-this当鼠标离开时:

$('#edit-this').mouseover(function() {
    if(timer)
        clearTimeout(timer);
    timer = null;

    var $this = $(this);
    $this.one('mouseleave', function() {
        $this.hide();
    });
});

您还需要清除 mouseover 中的计时器对于跨度(感谢您捕获这个):

$('span.editable').mouseover(function(e) {
    if(timer)
        clearTimeout(timer);
    timer = null;
    // ...
});

演示:http://jsfiddle.net/ambiguous/pBtG8/2/