Onmouseover and onmouseout troubles

A Div layer triggers onmouseover when the mouse moves in, and onmouseout when the mouse moves out.

Very easy logic, which is what we want! But the problem arises: onmouseover will not be triggered only when it is migrated, and onmouseout will not be triggered only when it is removed! Moving the mouse inside the DIV may also trigger onmouseover or onmouseout.

In, for 'A': When the mouse enters 'A' (path '1'), The onmouseover event of 'A' will be triggered; move the cursor to 'B' (path '2'). 'A' triggers the onmouseout (first) and onmouseover (later) events.

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

Do you really want to trigger these two events? Maybe you need an event that is triggered only at the time of migration, whether there are other elements in it or not ....

 

Solution

In IE, there are two such events as onmouseenter and onmouseleave. But unfortunately, FF and other browsers do not support it. It is just a good simulation implementation:

 
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) {// The onmouseenter event processing code can be written here} 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) {// The onmouseleave event processing code can be compiled here }}
 

 

 

Note:

What does W3C add to the Mouseover and mouseout events? Relatedtarget attribute

• In the Mouseover event, it indicates the element from which the mouse comes from
• In the mouseout event, it points to the element with the mouse

Why does Microsoft Add the following content to the Mouseover and mouseout events? Two attributes

• Fromelement indicates the mouse element in the Mouseover event
• Toelement: the element pointing to the mouse in the mouseout event