Element: mouseover 事件
當使用指點裝置（如滑鼠或觸控板）將游標移到 Element 元素或其子元素上時，將觸發 mouseover 事件。
如果目標元素有子元素，當滑鼠移動到這些元素的邊界時，也會觸發 mouseout 和 mouseover 事件，而不僅僅是目標元素本身。通常，mouseenter 和 mouseleave 事件的行為更合理，因為它們不受移動到子元素中的影響。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("mouseover", (event) => { })
onmouseover = (event) => { }
事件型別
一個 MouseEvent。繼承自 UIEvent 和 Event。
事件屬性
此介面還繼承其父級 UIEvent 和 Event 的屬性。
MouseEvent.altKey只讀-
如果滑鼠事件觸發時 alt 鍵處於按下狀態，則返回
true。 -
滑鼠事件觸發時按下的按鈕編號（如果適用）。
-
滑鼠事件觸發時按下的按鈕（如果有）。
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.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 事件之間的區別。
HTML
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
const test = document.getElementById("test");
// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener("mouseenter", (event) => {
// highlight the mouseenter target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener("mouseover", (event) => {
// highlight the mouseover target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-mouseover |
| HTML # handler-onmouseover |
瀏覽器相容性
載入中…