Differences between events mouseover, mouseout, mouseenter, and mouseleave: mouseovermouseout

Differences between events mouseover, mouseout, mouseenter, and mouseleave: mouseovermouseout

Recently, online examinations and course malls have encountered the following problems: When the mouse slides over, a layer appears, when the mouse slides to the current layer, mouseover and mouseout will flash in earlier browsers. There are many ways to solve this problem, however, I think the simplest way is to replace mouseover and mouseout with the corresponding mouseenter and mouseleave.

A mouseover event occurs when the cursor is over the element.

This event is usually used with a mouseout event.

Note: Unlike the mouseenter event, a mouseover event is triggered no matter the mouse pointer passes through the selected element or its child element. The mouseenter event is triggered only when the mouse pointer passes through the selected element.

Note: Unlike the mouseleave event, a mouseout event is triggered no matter the mouse pointer leaves the selected element or any child element. The mouseleave event is triggered only when the mouse pointer leaves the selected element. See the example below.

When the mouse pointer passes through the element, the mouseenter event occurs. This event is usually used with the mouseleave event.

Note: mouseover and mouseout events are also triggered when the mouse pointer passes through the child element of the selected element. During event binding, unexpected bugs may occur due to the mouseover mouseout event.

Mouseover and mouseenter

The mouseover event is triggered regardless of whether the mouse pointer passes through the selected element or its child element.

The mouseenter event is triggered only when the mouse pointer passes through the selected element.

Mouseout and mouseleave

The mouseout event is triggered no matter the mouse pointer leaves the selected element or any child element.

The mouseleave event is triggered only when the mouse pointer leaves the selected element.