Element: mouseout 事件

語法

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

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

onmouseout = (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 的別名。

示例

以下示例展示了 mouseout 事件的使用。

mouseout 和 mouseleave

以下示例說明了 mouseout 和 mouseleave 事件之間的區別。mouseleave 事件被新增到 <ul> 中，以便當滑鼠離開 <ul> 時將列表染成紫色。mouseout 被新增到列表中，以便當滑鼠離開目標元素時將其染成橙色。

當你嘗試此操作時，你會發現 mouseout 會傳遞給單獨的列表項，而 mouseleave 會傳遞給整個列表，這得益於各項的層次結構以及列表項遮擋底層 <ul> 的事實。

HTML

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

const test = document.getElementById("test");

// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", (event) => {
  // highlight the mouseleave target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(() => {
    event.target.style.color = "";
  }, 1000);
});

// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener("mouseout", (event) => {
  // highlight the mouseout target
  event.target.style.color = "orange";

  // reset the color after a short delay
  setTimeout(() => {
    event.target.style.color = "";
  }, 500);
});

結果

規範

瀏覽器相容性

另見

• 學習：事件簡介
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseenter
• mouseleave
• contextmenu
• pointerout