EventTarget事件：mouseleave

EventTarget事件 - mouseleave

當指針設備（通常是鼠標）的指針移出一個連接有監(jiān)聽器的元素時，會觸發(fā)mouseleave事件。

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

這意味著當指針退出元素及其所有后代時會觸發(fā)mouseleave，而當指針離開元素或離開元素的一個后代時（即使指針仍在元素內），會觸發(fā)mouseout。

一個mouseleave事件在離開時發(fā)送到層次結構的每個元素。當指針從文本移動到此處表示的最外部div之外的區(qū)域時，此處將4個事件發(fā)送到層次結構的四個元素。	一個單獨的mouseout事件被發(fā)送到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>

瀏覽器兼容性

我們將兼容性數(shù)據(jù)轉換為機器可讀的JSON格式。

• 電腦端

• 移動端

注釋：

[1]在錯誤236215中實現(xiàn)。

[2]在錯誤432698中實現(xiàn)。

[3]Safari 7在許多不允許的情況下觸發(fā)事件，使整個事件無用。有關錯誤的描述，請參閱錯誤470258（它也存在于舊的Chrome版本中）。Safari 8具有正確的行為。

[4]在錯誤218093中實現(xiàn)。