くるみ
JSのマウス関連のイベントって何あったっけ?
- JavaScriptのマウス関連のイベントって何あったっけ?
- とりあえず基本的なマウス操作のイベントを知りたい
という方に向けてJavaScriptの「マウス関連のイベント」をまとめました。
初学者の備忘録ゆえに至らない点もあると思いますが参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
JavaScriptのマウスイベント一覧
mousedown
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mousedown", () => {
message.innerText = "ハンバーガーっていいよね";
});
mousedownではその要素の上でボタンを押すと処理が行われます。
ハンバーガーの上でマウスを操作してみてね
くるみ
mouseup
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseup", () => {
message.innerText = "ハンバーガーに興味ない?";
});
mouseupではその要素の上でボタンを離すと処理が行われます。
mousemove
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mousemove", () => {
message.innerText = "ハンバーガーに興味あるんでしょ?";
});
mousemoveではその要素の上でマウスを動かすと処理が行われます。
mouseenter
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseenter", () => {
message.innerText = "ハンバーガーって病みつきになるよね";
});
mouseenterではマウスがその要素の上に乗ると処理が行われます。
mouseleave
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseleave", () => {
message.innerText = "ハンバーガー食べないん?";
});
mouseleaveではマウスがその要素の上から離れると処理が行われます。
mouseover
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseover", () => {
message.innerText = "ハンバーガーに興味あるんだ?";
});
mouseoverではマウスがその要素の上に乗ると処理が行われます。
mouseenterと一見同じに見えますが、mouseoverはバブリングします。
「ハブリング」ってのはイベントが親要素にも伝わることだね
くるみ
mouseout
const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseout", () => {
message.innerText = "ハンバーガー食べろや(直球)";
});
mouseoutではマウスがその要素の上から離れると処理が行われます。
mouseleaveと一見同じに見えますが、mouseoutはバブリングします。
マウス操作時に取得できる座標一覧
document.querySelector("#mouse_area").addEventListener("mousemove", (e) => {
document.querySelector("#offsetX").innerText = e.offsetX;
(省略)
});
マウス操作時のイベントの座標では以下のものを取得できます。
offsetX | 要素からのX座標 |
offsetY | 要素からのY座標 |
pageX | ページ左上からのX座標 |
pageY | ページ左上からのY座標 |
clientX | ブラウザ左上からのX座標 |
clientY | ブラウザ左上からのY座標 |
screenX | 端末左上からのX座標 |
screenY | 端末左上からのY座標 |
実際に座標を取得してみるとこんな感じ
offsetX
offsetY
pageX
pageY
clientX
clientY
screenX
screenY
ハンバーガーの上にマウスを乗せれば座標が表示されるよ
くるみ
まとめ
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝