Question

在我正在处理的应用程序中，我在长段落中使用span标记来提供这两个标记：

可点击链接，使用Javascript处理，
在鼠标悬停时，链接一侧显示“编辑此”按钮（具有与点击不同的功能）。

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

请参阅我的工作示例：http://jsfiddle.net/nrabinowitz/6uKk8/4/

问题：

我不能在mouseleave上使用span事件，因为这会在点击按钮之前隐藏按钮。
我无法使用透明div大小来同时包含span和按钮，因为如果div高于范围，则会阻止click 1}}事件，如果我使用z-index将div放在段落下方，则它似乎根本不会收到mouseleave事件。

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

我希望的行为是拥有一个（基于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/

Answer 2

如果你想要的只是编辑它以显示，直到他们鼠标输出编辑 - 这个代码将起作用：

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

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

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

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

2 个答案: