onmousemove

onmousemoveの基本的な使い方

イベントハンドラのonmousemoveは、要素上でマウスカーソルが動くたびに処理を実行できます。

以下は、利用例です。

<p id="test-p">★</p>
<div id="test-move">
ここでマウスを動かすと★の数が変わります。
</div>

<script>
function func1() {
  const y = document.querySelector("#test-p");
  if(y.textContent === "★★★★★★★★★★") {
    y.textContent = "★";
  }
  y.insertAdjacentHTML("beforeend", "★");
}
const x = document.querySelector("#test-move");
x.onmousemove = func1;
</script>

上記は、赤字部分でtest-pをオブジェクトとしてxから参照しています。青字部分は、test-pに★を追加しています。このため、マウスが移動すると★が追加されていきます。緑部分は、増えすぎないように★が10個になると1個に減らしています。

実行例は、以下のとおりです。

要素内でマウスを移動するたびに★が増え、10個になると1個に戻ります。

画像での利用例

onmousemoveは、img要素でも使えます。

<img src="199.png" alt="" id="test-move">

<script>
function func1() {
  x.src = ( /.*199.png/i.test(x.src) ) ? "11.png"
    : "199.png";
}

const x = document.querySelector("#test-move");
x.onmousemove = func1;
</script>

11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。

赤字部分は、条件演算子によってマウスが動くたびに画像を切り替えています。

実行例は、以下のとおりです。

画像上でマウスを動かすたびに、トランプ裏とスペードAの画像が切り替わります。

HTMLの属性として記述する(非推奨)

onmousemoveは、HTMLの属性としても記述できます。

<script>
function func1() {
  const y = document.querySelector("#test-p");
  if(y.textContent === "★★★★★★★★★★") {
    y.textContent = "★";
  }
  y.insertAdjacentHTML("beforeend", "★");
}
</script>

<p id="test-p">★</p>
<div onmousemove="func1();">
ここでマウスを動かすと★の数が変わります。
</div>

divタグで、onmousemove属性によってfunc1を呼び出しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。