元素：mouseenter 事件

語法

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

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

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

用法說明

雖然與 mouseover 相似，但 mouseenter 的不同之處在於它不會冒泡，並且當指標從其某個後代元素的物理空間移動到其自身的物理空間時，不會發送給任何後代元素。除此之外，如果合適，相同情況下的進入和移過事件會同時分發。

mouseenter 事件的行為

這描述了四個沒有內邊距或外邊距的同心 div 接收到的 mouseenter 事件，因此所有事件同時發生： 當進入層級結構中的每個元素時，都會向它們傳送一個 mouseenter 事件。在這裡，當指標到達文字時，會向層級結構中的四個元素髮送 4 個事件。

mouseover 事件的行為

單個 mouseover 事件被髮送到 DOM 樹中最深的元素，然後它會沿層級結構冒泡，直到被處理程式取消或到達根元素。

對於深層級結構，傳送的 mouseenter 事件數量可能非常巨大，並導致嚴重的效能問題。在這種情況下，最好監聽 mouseover 事件。

結合相應的 mouseleave（當滑鼠離開其內容區域時在元素上觸發），mouseenter 事件的行為方式與 CSS :hover 偽類非常相似。

示例

mouseover 文件包含一個示例，說明 mouseover 和 mouseenter 之間的區別。

mouseenter

以下這個簡單的例子使用 mouseenter 事件來改變 div 的邊框，當滑鼠進入它所分配的空間時。然後它向列表中新增一個專案，其中包含 mouseenter 或 mouseleave 事件的編號。

HTML

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

CSS

設定 div 的樣式使其更顯眼。

#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);
}

結果

規範

瀏覽器相容性

另見

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