元素：mouseleave 事件

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

當定點裝置（通常是滑鼠）的游標移出某個 Element 時，會觸發 mouseleave 事件。

mouseleave 和 mouseout 相似，但不同之處在於 mouseleave 不會冒泡，而 mouseout 會。這意味著當指標離開元素及其所有後代時，會觸發 mouseleave，而當指標離開元素或離開元素的某個後代時，會觸發 mouseout，這是由於冒泡（即使指標仍在該元素內）。除此之外，如果適用，在相同情況下，leave 和 out 事件會同時分派。

當元素從 DOM 中替換或移除時，不會觸發 mouseleave 和 mouseout 事件。

請注意，“移出元素”是指元素在 DOM 樹中的位置，而不是其視覺位置。例如，如果兩個同級元素定位方式使其中一個位於另一個內部，那麼從外部元素移到內部元素會觸發外部元素的 mouseleave，即使指標仍在外部元素的邊界內。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("mouseleave", (event) => { })

onmouseleave = (event) => { }

事件型別

一個 MouseEvent。繼承自 UIEvent 和 Event。

事件屬性

此介面還繼承其父級 UIEvent 和 Event 的屬性。

MouseEvent.altKey 只讀: 如果滑鼠事件觸發時 alt 鍵處於按下狀態，則返回 true。
MouseEvent.button 只讀: 滑鼠事件觸發時按下的按鈕編號（如果適用）。
MouseEvent.buttons 只讀: 滑鼠事件觸發時按下的按鈕（如果有）。
MouseEvent.clientX 只讀: 滑鼠指標在視口座標中的 X 座標。
MouseEvent.clientY 只讀: 滑鼠指標在視口座標中的 Y 座標。
MouseEvent.ctrlKey 只讀: 如果滑鼠事件觸發時 control 鍵處於按下狀態，則返回 true。
MouseEvent.layerX 非標準只讀: 返回事件相對於當前圖層的水平座標。
MouseEvent.layerY 非標準只讀: 返回事件相對於當前圖層的垂直座標。
MouseEvent.metaKey 只讀: 如果滑鼠事件觸發時 meta 鍵處於按下狀態，則返回 true。
MouseEvent.movementX 只讀: 滑鼠指標相對於上次 mousemove 事件位置的 X 座標。
MouseEvent.movementY 只讀: 滑鼠指標相對於上次 mousemove 事件位置的 Y 座標。
MouseEvent.offsetX 只讀: 滑鼠指標相對於目標節點內邊距邊緣位置的 X 座標。
MouseEvent.offsetY 只讀: 滑鼠指標相對於目標節點內邊距邊緣位置的 Y 座標。
MouseEvent.pageX 只讀: 滑鼠指標相對於整個文件的 X 座標。
MouseEvent.pageY 只讀: 滑鼠指標相對於整個文件的 Y 座標。
MouseEvent.relatedTarget 只讀: 事件的次要目標（如果存在）。
MouseEvent.screenX 只讀: 滑鼠指標在螢幕座標中的 X 座標。
MouseEvent.screenY 只讀: 滑鼠指標在螢幕座標中的 Y 座標。
MouseEvent.shiftKey 只讀: 如果滑鼠事件觸發時 shift 鍵處於按下狀態，則返回 true。
MouseEvent.mozInputSource 非標準只讀: 生成事件的裝置型別（MOZ_SOURCE_* 常量之一）。這可以讓你例如判斷滑鼠事件是由實際的滑鼠還是由觸控事件生成的（這可能會影響你解釋與事件關聯的座標的準確程度）。
MouseEvent.webkitForce 非標準只讀: 點選時施加的壓力大小。
MouseEvent.x 只讀: MouseEvent.clientX 的別名。
MouseEvent.y 只讀: MouseEvent.clientY 的別名。

HTML

html

<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

CSS

為 <div> 設定樣式以使其更可見。

css

#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333333;
}

JavaScript

let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem(`This is mouseenter event ${enterEventCount}.`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333333";
  leaveEventCount++;
  addListItem(`This is mouseleave event ${leaveEventCount}.`);
});

function addListItem(text) {
  // Create a new text node using the supplied text
  const newTextNode = document.createTextNode(text);

  // Create a new li element
  const newListItem = document.createElement("li");

  // Add the text node to the li element
  newListItem.appendChild(newTextNode);

  // Add the newly created list item to list
  unorderedList.appendChild(newListItem);
}