JavaScript: mouseenter event in JavaScript?

Question

Is there a mouse enter event in javascript(only JavaScript, no jQuery to be used, please)?

When I do this, it gives no response.

window.onload = initAll;
function initAll(){
    if(window.addEventListener){
        document.getElementById('container').addEventListener( 'mouseenter', freeze , false);
    }
}

function freeze(){
    console.log("mouse entered")    
}

Could someone Please explain me the difference between 'mouseenter' and 'mouseover'? Is 'mouseover' an alternative for 'mouseenter'?

Help Appreciated!

[MDN Docs, great place to learn: mouseenter](https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter) — epascarello, May 23 '13 at 12:27
http://stackoverflow.com/questions/6130737/mouseenter-without-jquery — Rachel Gallen, May 23 '13 at 12:28
There is a good explanation of the difference between mouseenter and mouseover here: http://api.jquery.com/mouseenter/ (about half way down) — Rob Johnstone, May 23 '13 at 12:31
btw don't forget to invoke your function: `window.onload = initAll();` (you are missing the brackets) — Petr Čihula, May 23 '13 at 12:34
Most of the time you can emulate IE's `mouseenter` by putting this code in your `mouseover` handler... `if (this !== event.target) { return }` This doesn't cover all situations. A full fix can be achieved pretty easily I think, but I don't remember exactly how of the top of my head. — , May 23 '13 at 12:45

score 4 · Accepted Answer · edited May 23 '17 at 12:08

4

Don't bother with onmouseenter, as this page states its specific to IE.

...Both onmouseenter and onmouseover fire when the mouse enters the boundary of an element. However, onmouseenter doesn't fire again (does not bubble) if the mouse enters a child element within this first element.

Try this for onmouseover:

yourObject.onmouseover=function()
    {
        //SomeJavaScriptCode
    };

Check this page for some good info on javascript mouse events.

edited May 23 '17 at 12:08

Community

1
1

answered May 23 '13 at 12:29

gwin003

7,432
5
38
59

So, is there no way to use 'mouseenter' with other browsers? – Navneet Saini May 23 '13 at 12:30
Apparently not according to that post. I normally use `onmouseover` anyways. You can use `onmouseenter` if you are using jQuery though, according to the first answer in my first link. http://api.jquery.com/mouseenter/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DEvents%2Fmouseenter%26redirect%3Dno – gwin003 May 23 '13 at 12:32
That page says "Firefox started supporting onmouseenter in version 10 (January 2012) and Chrome started supported it in version 30 (October 2013)" – ChrisV Dec 10 '16 at 12:38

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Definitely, Mouseover is an alternative to mouseenter. It gives the UI Control of whatever dom element is being accessed. refer this for further explaination http://dean.edwards.name/weblog/2005/10/add-event/ mouseenter without JQuery

edited May 23 '17 at 12:01

Community

1
1

answered May 23 '13 at 12:32

aakashkrgoel

27
4

But mouseover keeps on firing again and again? how to prevent that? – Navneet Saini May 23 '13 at 12:32
you could script a handler for that – Rachel Gallen May 23 '13 at 12:34
@RachelGallen I am not sure what you are talking about.. Can you please give me some lesson/tutorial link? – Navneet Saini May 23 '13 at 12:36
basically you code a onmouseout at the same time...to negate the onmouseover – Rachel Gallen May 23 '13 at 12:42
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30500/discussion-between-navneet-saini-and-rachel-gallen) – Navneet Saini May 23 '13 at 14:12

score 0 · Answer 3 · answered Aug 10 '14 at 11:29

If you use jQuery, use mouseenter and mouseleave instead of mouseover and mouseout.

enter image description here

If you take the example above, everything inside the border is an element, let's call the one on the left with the word 'Name' in it #A. mouseenter will only fire when move your mouse inside the border #A. mouseover on the other hand will fire when you enter the border, again when you move your mouse past the grey background behind the '1', and again when you move your mouse over the word 'Name'. If you want the event to fire once, use mouseenter.

score -2 · Answer 4 · answered May 23 '13 at 12:29

-2

Mouse over is used when you just hover over something. Mouse enter (or mousedown) is to be used when a the mouse is clicked. A full list of javascript events can be found here

answered May 23 '13 at 12:29

Rachel Gallen

27,943
21
72
81

3

If you read what it says at the link you've posted, you'll see that mouseenter has nothing to do with clicks – Rob Johnstone May 23 '13 at 12:34

JavaScript: mouseenter event in JavaScript?

4 Answers4