Question

Consider the following code (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();
});
​

When you mouse over the element ‘foo’ the closeButton appears using the jQuery ‘mouseenter’ event. When you click the close button ‘foo’ is removed which causes the element ‘bar’ to move under the current location of the mouse. However, the ‘mouseenter’ event does not fire for ‘bar’ until you move the mouse again.

Is there a good way to make it so that ‘bar’ receives this event immediately?

Consider that in this case you could remove multiple elements by simply clicking repeatedly. Jittering the mouse in between clicks is a bad user experience.

I am aware of several near anwsers that will not work in my case.

1) The closeButton element is not actually contained inside of the ‘foo’ element that it closes. This is required to avoid conflict with other scripts on the page and prevents using css :hover to display the button initially, which would work jsfiddle. 🙁

2) I know a little about DOMMutationEvents, their deprecation, and relative lack of support and I would like to avoid them and the various timer hacks to emulate them etc. I’m hoping that this problem is specific enough (a mouse location related event) to fire when the document has reflowed and modified the mouses target. Especially since obviously the CSS engine knows about it and handles it properly.

3) I am using jQuery to modify the page. I could monkey patch it to fire an event when I call ‘remove()’ and make sure that I “true up” all my other events. This could work but the remove could effect a large piece of the DOM and so it would be difficult to really pass any context into the handler. As a result I would have to do a lot of extra work, rather than just processing one event for the one element under the mouse. This might work now but be un-manageable later.

Thanks for any advice.

Answer 1

There’s a nifty method called document.elementFromPoint(event.pageX, event.pageY)

You’ll see how I’ve used it at the JSfiddle here 🙂 http://jsfiddle.net/7zEZw/1/