I have been exposed to the onmouseover event and onmouseout event in the past two days. I always thought that they were just simply triggering events when the mouse pointer moved to the element and triggering events when the mouse pointer moved out of the specified object. But I suddenly found that these are just simple descriptions of them. Let's take a look at them together after all, after all, they still have strange features. Is it good or bad?
First implement a box:
Bind the onmouseover event and onmouseout event on this box
Discover that nothing will happen to them, and then (hehe, you know!)
Let's create a B element, so that it is nested in element A as a child element of A
We still only bind the onmouseover event and onmouseout event to the outer parent element A. What will you find out? Yes, that's right! When the mouse moves in and removes child element B of A, the onmouseover event and the onmouseout event also occur! ! Why? This is not what I want! Is B not part of A at this time? Of course not, otherwise the onmouseover event will not occur when element B is moved into. This proves that element B is still an integral part of A.
Then what's going on? After all, the incident is making a mistake? Everyone knows that there are two kinds of event streams in commonly used browsers: event bubbles and event capture. Let's look at the definition of event bubbles: events are propagated step by step from the most specific event target to the least specific event target (document object). So when the mouse moves in and removes A's child element B, B's onmouseover event and onmouseout event will be triggered, but it does not have these two events, so it passes these two events to its parent element A. A has these two events, so the situation we see happen.
Some people will say how to avoid it. After all, not everyone has this kind of demand. We just need the parent element event to trigger, and let the child element be quietly a handsome man.
So W3C adds relatedTarget attributes in mouseover and mouseout events:
•In the mouseover event, it indicates which element the mouse comes from
•In the mouseout event, it points to the element that the mouse goes to
However, Microsoft has added two attributes to mouseover and mouseout events
•fromElement, in the mouseover event, indicates which element the mouse comes from
•toElement, the element that points to the mouse in the mouseout event
So we have the following code implementation
document.getElementById('box1').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 onmouseenter event alert('111');}}document.getElementById('box1').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 onmouseleave event processing code alert('2222');}}The above is a comprehensive understanding of the onmouseover incident and onmouseout incident introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!