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的计时器(感谢捕获此):

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

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

Answer 2

如果您想要的只是编辑this以显示直到鼠标离开edit-this，那么下面的代码就可以达到目的:

$('div.#edit-this').mouseleave(function(){
    $('#edit-this').hide();
});

http://jsfiddle.net/MarkKramer/6uKk8/12/

另外，我将它设置为使用jQuery计时器插件，所以当你滚动时，计时器将启动，如果编辑此按钮在两秒后没有滚动，它将隐藏自己。