我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
The mouseover
event is fired when a pointing device is moved onto the element that has the listener attached or onto one of its children.
General info
- Specification
- DOM L3
- Interface
MouseEvent
- Bubbles
- Yes
- Cancelable
- Yes
- Target
- Element
- Default Action
- None
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
view Read only |
WindowProxy |
document.defaultView (window of the document) |
detail Read only |
long (float ) |
0. |
currentTarget Read only |
EventTarget | The node that had the event listener attached. |
relatedTarget Read only |
EventTarget | For mouseover , mouseout , mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise. |
screenX Read only |
long | The X coordinate of the mouse pointer in global (screen) coordinates. |
screenY Read only |
long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
clientX Read only |
long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
clientY Read only |
long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
button Read only |
unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. |
buttons Read only |
unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info. |
mozPressure Read only |
float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). |
ctrlKey Read only |
boolean | true if the control key was down when the event was fired. false otherwise. |
shiftKey Read only |
boolean | true if the shift key was down when the event was fired. false otherwise. |
altKey Read only |
boolean | true if the alt key was down when the event was fired. false otherwise. |
metaKey Read only |
boolean | true if the meta key was down when the event was fired. false otherwise. |
Example
The following example illustrates the difference between mouseover
and mouseenter
events.
<ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <script> var test = document.getElementById("test"); // this handler will be executed only once when the cursor moves over the unordered list test.addEventListener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay setTimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor is moved over a different list item test.addEventListener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay setTimeout(function() { event.target.style.color = ""; }, 500); }, false); </script>
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
On disabled form elements | (Yes)[1] | 44.0 (44.0)[2] | (Yes) | No support | (Yes)[1] | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
On disabled form elements | ? | ? | ? | ? | ? |
[1] Only works for <textarea>
elements and some <input>
element types.
[2] Implemented in bug 218093.