2

考虑以下代码（此处为 jsfiddle ）

<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' 事件。

有没有一种好方法可以让“酒吧”立即收到这个事件？

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

我知道有几个附近的 anwsers 在我的情况下不起作用。

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

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

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

感谢您的任何建议。

4

1 回答 1

3

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

你会在这里看到我是如何在 JSfiddle 上使用它的 :) http://jsfiddle.net/7zEZw/1/

于 2012-06-12T02:48:06.097 回答