JQuery - MouseEnter когда позиция элемента изменяется

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' Элемент closeButton появляется с помощью Jquery '' MouseEnter событий. Когда вы нажимаете кнопку закрытия, «foo» удаляется, что приводит к тому, что элемент «bar» перемещается под текущим местоположением мыши. Однако событие «mouseenter» не срабатывает для «бара», пока вы не переместите мышь снова.

Есть ли хороший способ сделать так, чтобы «бар» получил это событие немедленно?

Учтите, что в этом случае вы можете удалить несколько элементов, просто щелкнув несколько раз. Дрожание мыши между щелчками - плохой пользовательский интерфейс.

Я знаю несколько близких людей, которые не будут работать в моем случае.

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/