mouseover事件

当指针设备移动到存在监听器的元素或其子元素的时候,mouseover事件就会被触发。

常规信息

Specification
DOM L3
Interface
MouseEvent
Bubbles
Yes
Cancelable
Yes
Target
Element
Default Action
None

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?
view 只读 WindowProxy document.defaultView (window of the document)
detail 只读 long (float) 0.
currentTarget 只读 EventTarget The node that had the event listener attached.
relatedTarget 只读 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 只读 long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY 只读 long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX 只读 long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY 只读 long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button 只读 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 只读 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 只读 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 只读 boolean true if the control key was down when the event was fired. false otherwise.
shiftKey 只读 boolean true if the shift key was down when the event was fired. false otherwise.
altKey 只读 boolean true if the alt key was down when the event was fired. false otherwise.
metaKey 只读 boolean true if the meta key was down when the event was fired. false otherwise.

示例

以下示例演示了mouseover事件与mouseenter事件的的区别。

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  var test = document.getElementById("test");
  
  
  // 当指针移动到这个无序列表上时,这个处理函数只会被执行一次
  test.addEventListener("mouseenter", function( event ) {   
    // highlight the mouseenter target
    event.target.style.color = "purple";

    // 在短暂的延时之后重置颜色
    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";

    // 在短暂的延时之后重置颜色
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

浏览器兼容性

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) 未实现 (Yes)[1] ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
On disabled form elements ? ? ? ? ?

[1] 只对 <textarea> 元素以及部分 <input> 元素类型有效。

[2] 在bug 218093中实现。

参阅资料

文档标签和贡献者

标签: 
 此页面的贡献者: MisanyaLiu
 最后编辑者: MisanyaLiu,