Element: mousemove イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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>マウスイベントを使ったお絵かき</h1>
<canvas id="myPics" width="560" height="360"></canvas>
CSS
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
JavaScript
// 真のとき、マウスを動かすと線を描く
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY はキャンバスの縁からのオフセットの (x,y) です。
// mousedown, mousemove, 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();
}
結果
仕様書
Specification |
---|
UI Events # event-type-mousemove |
HTML # handler-onmousemove |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mousemove event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support