这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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

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

 

General info

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

Properties

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

Examples

mouseout 文档有一个例子,说明了mouseoutmouseleave之间的区别。

以下示例说明了如何使用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 ){
    // the matchesSelector is prefixed in most (if not all) browsers
    return elem.matchesSelector( selector );
  };
</script>

Browser compatibility

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] Implemented in bug 236215.

[2] Implemented in bug 432698.

[3] Safari 7 fires the event in many situations where it's not allowed to, making the whole event useless. See bug 470258 for the description of the bug (it existed in old Chrome versions as well). Safari 8 has correct behavior

[4] Implemented in bug 218093.

See also

文档标签和贡献者

 此页面的贡献者: Hedgehog
 最后编辑者: Hedgehog,