mouseleave - Web API 接口参考 编辑

指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。

mouseleave  和 mouseout 是相似的，但是两者的不同在于mouseleave 不会冒泡而mouseout 会冒泡。
这意味着当指针离开元素及其所有后代时，会触发mouseleave，而当指针离开元素或离开元素的后代（即使指针仍在元素内）时，会触发mouseout。

当离开它们时，一个mouseleave事件被发送到层次结构的每个元素。当指针从文本移动到这里表示的最外面的div之外的区域时，这里4个事件会发送到层次结构的四个元素。	一个单一的鼠标事件mouseout被发送到DOM树最深的元素，然后它冒泡层次，直到它被处理程序取消或到达根。

 

一般信息

规范

DOM L3

接口

MouseEvent

是否冒泡

否

是否可取消

否

对象

Element

默认动作

无

属性

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 事件: 互补事件的目标(详情查看relatedTarget)。
screenX 只读	long	全局（屏幕）坐标中鼠标指针的X坐标。
screenY 只读	long	全局（屏幕）坐标中鼠标指针的Y坐标。
clientX 只读	long	鼠标指针在本地（DOM内容）坐标中的X坐标。
clientY 只读	long	鼠标指针在本地（DOM内容）坐标中的Y坐标。
button 只读	unsigned short	这总是为0，因为没有按钮按下触发这个事件（鼠标移动触发的事件）。
buttons 只读	unsigned short	当鼠标事件被触发时按下按键：左按键= 1，右按键= 2，中（轮）按键= 4，第四按键（通常为“浏览器后退”按键）= 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 文档有一个例子，说明了mouseout和mouseleave之间的区别。

以下示例说明了如何使用mouseout来模拟mouseleave事件的事件委托原则。

 

<ul id="test">
  <li>
    <ul class="leave-sensitive">
      <li>item 1-1</li>
      <li>item 1-2</li>
    </ul>
  </li>
  <li>
    <ul class="leave-sensitive">
      <li>item 2-1</li>
      <li>item 2-2</li>
    </ul>
  </li>
</ul>

<script>
  var delegationSelector = ".leave-sensitive";

  document.getElementById("test").addEventListener("mouseout", function( event ) {
    var target = event.target,
        related = event.relatedTarget,
        match;

    // search for a parent node matching the delegation selector
    while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
        target = target.parentNode;
    }

    // exit if no matching node has been found
    if ( !match ) { return; }

    // loop through the parent of the related target to make sure that it's not a child of the target
    while ( related && related != target && related != document ) {
        related = related.parentNode;
    }

    // exit if this is the case
    if ( related == target ) { return; }

    // the "delegated mouseleave" handler can now be executed
    // change the color of the text
    target.style.color = "orange";
    // reset the color after a small amount of time
    setTimeout(function() {
        target.style.color = "";
    }, 500);


  }, false);


  // function used to check if a DOM element matches a given selector
  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
  function matches( elem, selector ) {
    if (typeof elem.matchesSelector === "function") {
      // the matchesSelector is prefixed in most (if not all) browsers
      return elem.matchesSelector( selector );
    } else if (typeof elem.matches === "function") {
      return elem.matches( selector );
​​​​​​​    }
  };
</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!

• Desktop
• Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	30[1]	(Yes)	10[2]	5.5	(Yes) 未实现 15.0 17.0	7[3]
On disabled form elements	未实现	未实现	44.0 (44.0)[4]	未实现	未实现	?

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes)	?	?	?	?
On disabled form elements	?	?	未实现	?	?	?	?

[1] 实现于 bug 236215.

[2] 实现于bug 432698.

[3] Safari 7 会在许多不适当的情形下引发该事件,使得这个事件变得无用.详情参阅bug 470258  (老版Chrome也有类似问题). Safari 8 已修正.

[4] 实现于 bug 218093.

相关链接

• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu