Mouse event comparison with mouse position

The difference between MouseEnter and mouseover

These two are triggered when the mouse moves inside the element, the difference being that the MouseEnter event has no bubbling phase, and the MouseOver event has a bubbling phase, which is the first difference.

The second difference is that the probability of triggering is different:

• The mouse from outside the element into the element, will certainly trigger MouseEnter, but does not necessarily trigger mouseover. Because MouseOver can only be triggered if the element has space to be directly touched by the mouse. Even if triggered at the same time, their order in different browsers also have a difference: in Chrome42, the MouseEnter event is distributed before the MouseOver event In ie5.5-10,firefox37, the MouseOver event is triggered first than the MouseEnter event.
• The mouse moves from the child element into the current element and does not trigger MouseEnter, but may trigger mouseover (provided the current element has space to be directly accessible to the mouse).

It is important to note that in theory the mouseenter of the parent element should be triggered before the mouseenter of the child element, but not necessarily in Chrome42. When the parent element has no space to be directly touched by the mouse, the mouse moves directly into the child element, first triggering the child element's mousenter, and then the parent element's MouseEnter.

The difference between MouseLeave and mouseout

Both of these are triggered when the mouse moves out of the element, the difference being that the MouseLeave event has no bubbling phase, and the Mouseout event has a bubbling phase, which is the first difference.

The second difference is that the probability of triggering is different:

• The mouse moves from inside an element to an element, and two events are triggered only once, but their order differs from one browser to another: in Chrome42, MouseLeave events are distributed first than mouseout events. In ie5.5-10,firefox37, the Mouseout event is triggered first than the MouseLeave event.
• The mouse enters the child element from the element, does not trigger MouseLeave, but triggers mouseout.

Mousedown, MouseUp, MouseMove

Each of the three events has a bubbling phase, which is the only thing they have in common.

When the mouse clicks on the element (left, right, including the middle roller), the MouseDown event is triggered, and in the action of the drag element, the mouse position is usually recorded in the listener of the event.

MouseUp is the event triggered by an element that is directly in contact with the mouse when the mouse button is released. As a result, MouseDown and MouseUp may not be triggered on the same element.

Click, ContextMenu and DblClick

In ie5-10 and Chrome, click Refers only to the left mouse button and scroll click, and the right mouse click triggers the ContextMenu event.

In Firefox37, the right mouse click triggers the click event, and the Click event is triggered before the ContextMenu event.

The DblClick is the event that is triggered two times in a row with a quick click of the left mouse button, and the common problems are also here, as DblClick triggers two click events at the same time. There is no perfect way to solve this problem, so it is generally not dblclick.

The Click event contains both events that trigger MouseDown and MouseUp, and the Click event is triggered only if both events occur on the same element. So its order is MouseDown, MouseUp, click.

Mousewheel

This event should be said to be the least compatible mouse event because Firefox does not support it at all. Both ie6+ and chrome support this event.

Although Firefox does not support, but the roller rotation is generally also the scroll bar in motion, so the monitoring element of the scroll event can be, so this event is rarely used in the application, handheld devices more than this event. Do not rule out that the event will be eliminated in the future, so try not to.

Mouse events on Window & document

Ie6-8,window does not distribute or receive any of these mouse events, but document can receive mouseover, Mouseout, MouseDown, MouseUp, and MouseMove events. Firefox37,chrome42 and ie9+ can accept MouseOver, mouseout, MouseDown, MouseUp, and MouseMove events on both window and document.

The Chrome42 supports the Document object to trigger MouseEnter and MouseLeave events, and the Window object cannot trigger MouseEnter and MouseLeave events.

Ie6-10 and Firefox37 do not support document and window triggering of MouseEnter and MouseLeave events.

The body supports triggering mouseenter and MouseLeave events, but if you need to monitor whether the mouse is in the current window, you cannot rely entirely on the two events on the listener body to judge. Because the body also has a height, not necessarily can fill the entire window. The best way to do this is to listen for the mouseover and mouseout events of the document.

It is important to note that in IE and chrome, the mouse does not move on the element, and the MouseMove event is triggered every little while, while Firefox does not.

Mouse position screen coordinates –event.screenx, Event.screeny

Screenx and Screeny with the table are the coordinates of the mouse over the entire screen.

Window coordinates-event.clientx, Event.clienty

The coordinates of this mouse in the Browser client window area (which part of the actual display page). The Customer window area does not include scroll bars and other window attachments (such as Firebug) that appear inside the browser.

Regardless of the horizontal or vertical axis, the mouse customer coordinates are generally smaller than the screen coordinates, because the browser outermost is usually a box.

In browsers that support position:fixed, these two properties are useful, especially if the clienty corresponds to the y-coordinate of the fixed location.

element coordinate-event.offsetx,event.offsety

When a mouse event occurs on an element, the coordinate is a coordinate of the mouse relative to the top-left corner of the element, and the maximum coordinate value depends on the size of the element. That is, this coordinate is a new coordinate of the element's internal coordinate system, which is only related to the element size, and the origin is in the upper left corner of the element.

Both IE5-10 and Chrome support two properties, but there are no two properties in Firefox.

These two properties are useful when dragging elements, which can be used to ensure that the mouse is in the position of the initial click Element during drag. But because Firefox does not support two properties, this calculation is somewhat complicated. Fortunately, starting with the FIREFOX3 element supports the Getboundingclientrect () method, which allows you to get the coordinates of the element relative to the browser window. The window coordinates of the element are then subtracted from the mouse event's window coordinate, which is the offset coordinate of the upper-left corner of the relative element, i.e. OffsetX and offsety.

Move offset Vector-event.movementx,event.movementy

These two values are the relative coordinates of the mouse movement during the two mouse movement event interval, and are computed as follows: currentEvent.movementX =currentEvent.screenX - previousEvent.screenX .

Only Firefox,chrome supports these two properties at this time.

Mouse event comparison with mouse position