EventTarget事件：mouseleave

EventTarget事件 - mouseleave

当指针设备（通常是鼠标）的指针移出一个连接有监听器的元素时，会触发mouseleave事件。

mouseleave和mouseout是相似的，但不同之处在于mouseleave不会冒泡而mouseout会。

这意味着当指针退出元素及其所有后代时会触发mouseleave，而当指针离开元素或离开元素的一个后代时（即使指针仍在元素内），会触发mouseout。

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

基本信息

属性

示例

该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 ){
    // the matchesSelector is prefixed in most (if not all) browsers
    return elem.matchesSelector( selector );
  };
</script>

浏览器兼容性

我们将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端

注释：

[1]在错误236215中实现。

[2]在错误432698中实现。

[3]Safari 7在许多不允许的情况下触发事件，使整个事件无用。有关错误的描述，请参阅错误470258（它也存在于旧的Chrome版本中）。Safari 8具有正确的行为。

[4]在错误218093中实现。