jQuery - 当元素位置改变时鼠标输入

Question

考虑以下代码(jsfiddle here)

<span class="content">foo</span><span class="closeButton">close</span>
<span class="content">bar</span><span class="closeButton">close</span>​

.content { padding: 0 4em; }
.closeButton:hover { display:inline; }
.closeButton {
    display: none;
    position: relative;
    left: -3em;
}

​$('.content').on('mouseenter', function() {
    $(this).next().css('display', 'inline');
}).on('mouseleave', function() {
    $(this).next().css('display', '');    
});
$('.closeButton').on('click', function() {
    $(this).prev().remove().end().remove();
});
​

当您将鼠标悬停在元素“foo”上时，将使用 jQuery“mouseenter”事件显示 closeButton。当您单击关闭按钮时，“foo”将被删除，这会导致元素“bar”移动到鼠标的当前位置下方。但是，在您再次移动鼠标之前，“bar”不会触发“mouseenter”事件。

有没有好的方法可以让“bar”立即接收到这个事件？

考虑一下，在这种情况下，您只需重复单击即可删除多个元素。在两次点击之间抖动鼠标是一种糟糕的用户体验。

我知道有几个近似答案不适用于我的情况。

1) closeButton 元素实际上并不包含在它关闭的“foo”元素内。这是必要的，以避免与页面上的其他脚本发生冲突，并防止使用 css :hover 最初显示按钮，这将起作用 jsfiddle 。 :(

2)我对 DOMMutationEvents、它们的弃用和相对缺乏支持了解一点，我想避免它们以及模拟它们的各种计时器黑客等。我希望这个问题足够具体(鼠标位置相关事件)在文档回流并修改鼠标目标时触发。特别是因为显然 CSS 引擎知道它并正确处理它。

3) 我正在使用 jQuery 来修改页面。当我调用“remove()”时，我可以对其进行猴子修补以触发事件，并确保“正确”所有其他事件。这可以工作，但删除可能会影响很大一部分 DOM，因此很难真正将任何上下文传递到处理程序中。因此，我必须做很多额外的工作，而不是仅仅处理鼠标下的一个元素的一个事件。这现在可能有效，但以后就无法管理了。

感谢您的建议。

Answer 1

有一个名为 document.elementFromPoint(event.pageX, event.pageY) 的漂亮方法

您将在此处看到我如何在 JSfiddle 中使用它:) http://jsfiddle.net/7zEZw/1/