EventTarget事件：mouseleave

EventTarget事件 - mouseleave

當(dāng)指針設(shè)備（通常是鼠標(biāo)）的指針移出一個(gè)連接有監(jiān)聽(tīng)器的元素時(shí)，會(huì)觸發(fā)mouseleave事件。

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

這意味著當(dāng)指針退出元素及其所有后代時(shí)會(huì)觸發(fā)mouseleave，而當(dāng)指針離開(kāi)元素或離開(kāi)元素的一個(gè)后代時(shí)（即使指針仍在元素內(nèi)），會(huì)觸發(fā)mouseout。

一個(gè)mouseleave事件在離開(kāi)時(shí)發(fā)送到層次結(jié)構(gòu)的每個(gè)元素。當(dāng)指針從文本移動(dòng)到此處表示的最外部div之外的區(qū)域時(shí)，此處將4個(gè)事件發(fā)送到層次結(jié)構(gòu)的四個(gè)元素。	一個(gè)單獨(dú)的mouseout事件被發(fā)送到DOM樹(shù)的最深層元素，然后它會(huì)向?qū)哟谓Y(jié)構(gòu)冒泡，直到它被處理程序取消或到達(dá)根目錄。

基本信息

屬性

示例

該mouseout文檔具有表示mouseout和mouseleave之間的差異的例子。

以下示例說(shuō)明如何使用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ù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端

注釋：

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

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

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

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