Element：mousemove 事件
當定點裝置（通常是滑鼠）移動且游標熱點在其內部時，會向元素觸發 mousemove 事件。
無論是否按下任何滑鼠按鈕，都會發生這些事件。它們的觸發頻率可能非常高，這取決於使用者移動滑鼠的速度、機器的速度、正在發生的其他任務和程序等。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("mousemove", (event) => { })
onmousemove = (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的別名。
示例
以下示例使用 mousedown、mousemove 和 mouseup 事件，允許使用者在 HTML canvas 上繪圖。其功能很簡單：線條粗細設定為 1，顏色始終為黑色。
頁面載入時，建立常量 myPics 和 context 以儲存對 canvas 和我們將用於繪圖的 2d 上下文的引用。
當 mousedown 事件觸發時開始繪圖。首先，我們將滑鼠指標的 x 和 y 座標儲存在變數 x 和 y 中，然後將 isDrawing 設定為 true。
當滑鼠在頁面上移動時，會觸發 mousemove 事件。如果 isDrawing 為 true，事件處理程式會呼叫 drawLine 函式，從儲存的 x 和 y 值到當前位置繪製一條線。
當 drawLine() 函式返回時，我們調整座標，然後將它們儲存在 x 和 y 中。
mouseup 事件繪製最終的線段，將 x 和 y 設定為 0，並透過將 isDrawing 設定為 false 來停止進一步的繪圖。
HTML
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
CSS
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
JavaScript
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isDrawing = true;
});
myPics.addEventListener("mousemove", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
window.addEventListener("mouseup", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-mousemove |
| HTML # handler-onmousemove |
瀏覽器相容性
載入中…