こちらの記事では、JavaScriptのmousemove(マウスムーブ)イベントについてサンプルコードを用いて分かりやすく解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
mousemoveイベントとは
mousemoveイベントとは、イベントを設定した要素内でマウスカーソルが移動したタイミングで実行されるイベントです。
要素内の位置座標を取得したり、Canvasとmousemoveイベントを組み合わせてお絵描きアプリなどを作ることができます。
mousemoveイベントの使い方
mousemoveイベントは「addEventListenerメソッド」「onmousemoveプロパティ」「onmousemove属性」の3つの書き方があります。▼トリガーになる要素を取得(addEventListenerとonmousemoveプロパティで使用)
const elem = document.getElementById('js-elem'); // トリガーになる要素を取得
▼addEventListenerメソッド
elem.addEventListener('mousemove',function(){ // 第一引数にmousemoveを指定
// 処理を記述
});
▼onmousemoveプロパティ
elem.onmousemove = function(){
// 処理を記述
};
▼onmousemove属性
<button onmousemove="mousemoveEvent()">テキスト</button>
<script>
function mousemoveEvent(){
// 処理を記述
};
</script>
サンプルコード
こちらで紹介するサンプルコードは、背景色が朱色のコンテンツにマウスカーソルを重ねて移動させると、要素内の座標値XとYが表示されます。<style>
#js-move{
max-width:500px;
height:250px;
background:#e94709;
display:flex;
align-items:center;
justify-content:center;
}
</style>
<div id="js-move">ここでマウスカーソルを移動させてね!</div>
<p>現在の座標</p>
<p>X:<span id="point-x"></span></p>
<p>Y:<span id="point-y"></span></p>
<script>
const moveElem = document.getElementById('js-move'); // ①
const pointX = document.getElementById('point-x'); // ②
const pointY = document.getElementById('point-y'); // ②
moveElem.addEventListener('mousemove',function(e){ // ③
pointX.textContent = e.offsetX; // ④
pointY.textContent = e.offsetY; // ④
})
</script>
実行結果
ここでマウスカーソルを移動させてね!
現在の座標
X:
Y:
サンプルコード解説
- mousemoveイベントを設定する要素を取得
- 座標値XYを表示させるための要素を取得
- ①で取得した要素に対してmousemoveイベントを設定し、座標値取得のため引数eを記述
- 引数eを使い座標値XYを取得し、②の変数に代入し表示させる