mouseout 事件在当指针设备(通常是鼠标)移出了附加侦听器的元素或关闭了它的一个子元素时触发。需要注意的是,当你从附加侦听器的父元素移动到它的子元素时也会触发,因为您已移出父元素的可视区域。

基本信息

规范
DOM L3
接口
MouseEvent
是否冒泡
Yes
能取消默认行为
Yes
目标对象
Element
默认行为
None

属性

Property Type Description
target 只读 EventTarget 事件对象(DOM树顶层对象)。
type 只读 DOMString 事件类型。
bubbles 只读 Boolean 事件是否冒泡。
cancelable 只读 Boolean 事件是否可取消默认行为。
view 只读 WindowProxy document.defaultView (window of the document)
detail 只读 long (float) 0.
currentTarget 只读 EventTarget 附加事件侦听器的节​​点。
relatedTarget 只读 EventTarget 对于 mouseover, mouseout, mouseenter 和 mouseleave 事件: 互补事件的目标对象 (比如 mouseleave 的target 在 mouseenter 事件为relatedTarget)。否则为null 。
screenX 只读 long 鼠标指针在全局(屏幕)坐标中的X坐标。
screenY 只读 long 鼠标指针的全局(屏幕)坐标中的Y坐标。
clientX 只读 long 鼠标指针在局部(DOM内容)坐标中的X坐标。
clientY 只读 long 鼠标指针在局部(DOM内容)坐标中的Y坐标。
button 只读 unsigned short 这始终为0,因为触发此事件没有按钮按下(鼠标移动触发)。
buttons 只读 unsigned short 鼠标事件触发时按下的按钮:左键 = 1,右键 = 2,中键(滚轮)= 3,第四键(通常为浏览器返回键)= 8,第五键(通常为浏览器前进 键)= 16。如果按下两个或更多的按钮,则返回键值之和。例如,按下左键和右键,返回3 (=1 | 2)。更多信息
mozPressure 只读 float 生成事件时施加到触摸板或tabdevice上的压力量;该值介于0.0(最小值)到1.0(最大值)之间。
ctrlKey 只读 boolean 如果事件触发时 ctrl 键已经按下则为true,反之则为false
shiftKey 只读 boolean 如果事件触发时 shift 键已经按下则为true,反之则为false
altKey 只读 boolean 如果事件触发时 alt 键已经按下则为true,反之则为false
metaKey 只读 boolean 如果事件触发时 meta 键已经按下则为true,反之则为false

示例

以下示例说明了 mouseout 和 mouseleave 事件的区别。

<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 off the unordered list
  test.addEventListener("mouseleave", function( event ) {   
    // highlight the mouseleave 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 off a different list-item
  test.addEventListener("mouseout", function( event ) {   
    // highlight the mouseout target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

[1] Only works for <textarea> elements and some <input> element types.

[2] Implemented in bug 218093.

相关

文档标签和贡献者

标签: 
此页面的贡献者: wbamberg, mdnwebdocs-bot, irenesmith, chenyanfei-m
最后编辑者: wbamberg,