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＆＃39; closeButton出现在jQuery＆＃39; mouseenter＆＃39;事件。当您点击关闭按钮时，foo＆＃39;被删除导致元素＆＃39; bar＆＃39;在鼠标的当前位置下移动。然而，＆＃39; mouseenter＆＃39;活动不会因为酒吧而被开除。直到你再次移动鼠标。

是否有一个很好的方法来制作它以便＆＃39; bar＆＃39;立即收到这个事件？

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

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

1）closeButton元素实际上并不包含在＆f; foo＆＃39;它关闭的元素。这是为了避免与页面上的其他脚本冲突，并阻止使用css：hover最初显示按钮，这将起作用jsfiddle。：（

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

3）我正在使用jQuery来修改页面。当我打电话给'＆＃39;删除（）＆＃39;并确保我＆＃34;真实起来＆＃34;我所有的其他活动。这可能有效但删除可能会影响DOM的大部分，因此很难将任何上下文传递到处理程序中。因此，我必须做很多额外的工作，而不是只为鼠标下的一个元素处理一个事件。这可能现在有效，但以后无法管理。

感谢您的任何建议。

Answer 1

有一个很棒的方法叫做document.elementFromPoint（event.pageX，event.pageY）

你会看到我在JSfiddle中使用它的方式:) http://jsfiddle.net/7zEZw/1/

jQuery - 元素位置更改时的Mouseenter

1 个答案: