EventTarget事件:mouseleave

2019-01-23 16:26 更新

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á)根目錄。

基本信息

規(guī)范DOM L3 
接口MouseEvent
是否冒泡
是否可取消
目標(biāo)Element
默認(rèn)操作沒(méi)有

屬性

屬性類型描述
target(只讀)EventTarget事件目標(biāo)(DOM樹(shù)中最頂層的目標(biāo))。
type(只讀)DOMString事件的類型。
bubbles(只讀)Boolean
事件是否正常冒泡
cancelable(只讀)Boolean事件是否可以取消
view(只讀)WindowProxydocument.defaultViewwindow文件)
detail(只讀)longfloat0。
currentTarget(只讀)EventTarget附加了事件監(jiān)聽(tīng)器的節(jié)??點(diǎn)。
relatedTarget(只讀)EventTarget對(duì)于mouseovermouseout,mouseentermouseleave事件:互補(bǔ)事件的目標(biāo)(在mouseenter事件的情況下為mouseleave目標(biāo))。否則為null 
screenX(只讀)long
全局(屏幕)坐標(biāo)中鼠標(biāo)指針的X坐標(biāo)。
screenY(只讀)long
全局(屏幕)坐標(biāo)中鼠標(biāo)指針的Y坐標(biāo)。
clientX(只讀)long
鼠標(biāo)指針在本地(DOM內(nèi)容)坐標(biāo)中的X坐標(biāo)。
clientY(只讀)long
鼠標(biāo)指針在本地(DOM內(nèi)容)坐標(biāo)中的Y坐標(biāo)。
button(只讀)unsigned short
這始終為0,因?yàn)闆](méi)有按鈕按下此事件(鼠標(biāo)移動(dòng))。
buttons(只讀)unsigned short
觸發(fā)鼠標(biāo)事件時(shí)按下按鈕:左按鈕= 1,右按鈕= 2,中間(滾輪)按鈕= 4,第4按鈕(通常,“瀏覽器返回”按鈕)= 8,第5按鈕(通常為“瀏覽器”轉(zhuǎn)發(fā)“按鈕”= 16。如果按下兩個(gè)或更多按鈕,則返回值的邏輯和。例如,如果按下左鍵和右鍵,則返回3(= 1 | 2)。
mozPressure(只讀)float
生成事件時(shí)施加到觸摸或制表設(shè)備的壓力量;此值介于 0.0 (最小壓力) 和 1.0 (最大壓力) 之間。
ctrlKey(只讀)boolean
如果在觸發(fā)事件時(shí)控制鍵已關(guān)閉,則為true,否則為false。
shiftKey(只讀)boolean
如果在事件被觸發(fā)時(shí)shift鍵已關(guān)閉,則為true,否則為false
altKey(只讀)boolean
如果事件被觸發(fā)時(shí)alt鍵已關(guān)閉,則為true,否則為false。
metaKey(只讀)boolean
如果在觸發(fā)事件時(shí)meta鍵已關(guān)閉,則為true,否則為false。

示例

該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格式。

  • 電腦端

Chrome
Edge
Firefox(Gecko)Internet Explorer
Opera
Safari
基本支持支持:30 [1]支持支持:10 [2]支持:5.5不支持:15.0 、17.0支持:7 [3]
在禁用的表單元素上不支持不支持支持:44.0[4]不支持沒(méi)有支持?
  • 移動(dòng)端

AndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持??支持????
在禁用的表單元素上
??不支持????

注釋:

[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)。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)