Some thoughts on onmouseover and onmouseout_Basic knowledge

For a DIV layer, onmouseover will be triggered when the mouse moves in, and onmouseout will be triggered when the mouse moves out.

Simple logic, this is what we want! But then comes the trouble: onmouseover does not only trigger when moving in, and onmouseout does not only trigger when moving out! Onmouseover or onmouseout may also be triggered when the mouse moves inside a DIV.

In the above picture, for 'A': when the mouse enters 'A' (path '1'), the onmouseover event of 'A' will be triggered; then the mouse moves to ' B' (path '2'), at this time 'A' will trigger onmouseout (first) and onmouseover (last) events.

It can be seen that if there are other elements ('B', 'C' layers) inside the HTML element ('A' layer), the outermost layer will be triggered when we move to these internal elements. ('A' layer) onmouseout and onmouseover events.

Are the triggering behaviors of these two events really what you want? Maybe you need an event that only fires when moved in, and an event that only fires when moved out, regardless of whether there are other elements inside it....

Solution

There are indeed two such events you need under IE: onmouseenter and onmouseleave. Unfortunately, other browsers such as FF do not support it, so we have to simulate the implementation:

Copy the code The code is as follows:

document.getElementById('...').onmouseover = function(e){
if( !e ) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while( reltg && reltg != this ) reltg = reltg.parentNode;
if( reltg != this ){
// Here you can write the processing code for the onmouseenter event
}
}
document.getElementById('...').onmouseout = function(e){
if( !e ) e = window.event;
var reltg = e.relatedTarget ? e .relatedTarget : e.toElement;
while( reltg && reltg != this ) reltg = reltg.parentNode;
if( reltg != this ){
// Here you can write the processing code for the onmouseleave event
}
}

Note:

W3C added relatedTarget attribute in mouseover and mouseout events

• In mouseover event, it represents the mouse From which element
• In the mouseout event, it points to the element where the mouse goes
And Microsoft added two properties in the mouseover and mouseout events

• fromElement, which is represented in the mouseover event Which element the mouse comes from
•toElement, points to the element the mouse goes to in the mouseout event