JavaScript event handler

Question

I am trying to fix a bug with the mouseenter and mouseleave handler.

listener.addEventListener('mouseenter', function(){
    element.style.visibility = "visible";
}, true);

listener.addEventListener('mouseleave', function(){
    element.style.visibility = "hidden";
}, true);

The events work as expected except for when i am moving the mouse over the element it flashes the mouse leave event.

Any fixes for this?

Plain javascript solutions only, please (no 3rd party libraries).

When you move the mouse rapidly across the object, it should flash because you will first get a mouseenter and then a mouseleave. What are you expecting to happen? — jfriend00, Feb 23 '14 at 18:13
In any case, you should probably just do this in CSS with `:hover`. — Felix Kling, Feb 23 '14 at 18:21

score 0 · Answer 1 · answered Feb 23 '14 at 18:19

0

The pointer in Javascript is only "hovering" the topmost (visible) element.

This means that if you've say a background div and when "entering" it you display another div on top of it the cursor will exit the background to enter the new div.

May be you can just set opacity to 0 instead of hiding the div and leave it always "visible" (also placing the event handler in the appearing div, not in the background one).

answered Feb 23 '14 at 18:19

6502

112,025
15
165
265

thats a cheap way to solve the issue instead i had it check the list of parents and if a parent was that of my element the event was not triggered. Note that opacity gives issues in early versions of IE. – user3330630 Feb 23 '14 at 18:23
@user3330630: I stopped quite a bit ago caring about what IE authors do intentionally to break the internet and chain users to their non-standard solutions. – 6502 Feb 23 '14 at 18:25
Thats because your not a real developer. shame on you for having a stackoverflow account. – user3330630 Feb 23 '14 at 19:00
@user3330630: I am a developer, but indeed my main business is not about writing web applications and I mainly play with js/html for fun. Fiddling with IE bad implementation issues (or, if you want to be just a bit paranoid, bending to their agenda) is however not my idea of fun. Long ago I realized that in all my js/html software there was a code path for every other possible browser and one for IE. I simply decided to stop following their crazy plot. – 6502 Feb 23 '14 at 22:50

Mehran Hatami · Answer 2 · 2014-02-23T18:40:46.227

There is property named relatedTarget in the mouse event, which would help you fix it. you should check if it is not in the area like:

listener.addEventListener('mouseleave', function(event){
    if(!event.relatedTarget ||
       (event.relatedTarget != listener && event.relatedTarget.parentNode != listener))
        element.style.visibility = "visible";
    else
        alert("I am still in listener area but mouseleave got triggered :)))");
}, true);

The point here is I have checked only for the first parent level, but you better create a function to check it for all the DOM tree in the listener node. I mean it could be one of the nested childNodes in the listener node.

I know it seems kind of weird, but it is the way it is, sometimes when it enters to a child nodes area mouseleave gets triggered.

@cookiemonster: I updated my answer to clarify this weird situation. — Mehran Hatami, Feb 23 '14 at 18:41
Oh sorry i already found a solution, i will post it when i get 10 reputation. i wont forget. — user3330630, Feb 23 '14 at 19:46

JavaScript event handler

2 Answers2