mousemove/JavaScript

イベントリスナーのmousemoveについて説明します。

mousemoveの使い方

 mousemoveは、マウスカーソルが移動する度に処理を実行出来ます。

 以下は、例です。

【mousemove利用例】
<p id="test-p">★</p>
<div id="test-move1">
ここでマウスを動かすと★の数が変わります。
</div>

<script>
function func1() {
    var y = document.getElementById("test-p");
    if(y.innerHTML == "★★★★★★★★★★") {
        y.innerHTML = "★";
    }
    y.innerHTML = y.innerHTML + "★";
}

var x1 = document.getElementById("test-move1");
x1.addEventListener("mousemove", func1, false);
</script>

 赤字部分は、test-pをオブジェクトとしてyから参照しています。青字部分は、test-pに★を追加しています。緑部分は、test-move1でmousemoveをイベントに登録し、関数func1を呼び出しています。

 このため、test-move1内でマウスが移動すると関数func1が呼び出され、★が追加されていきます。紫部分は、増えすぎないように★が10個になると1個に減らしています。

 実行例は、以下の通りです。尚、分かり易いように枠を付けています。

ここでマウスを動かすと★の数が変わります。

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

画像での利用例

 mousemoveは<img>でも使えます。

【imgタグでの利用例】
<img src="11.png" alt="スペードA" id="test-move2" />
<img src="39.png" alt="ハート9" id="test-move3" style="display:none;" />

<script>
function func2() {
    if ( x2.style.display ==  "none" ) {
        x2.style.display =  "block";
        x3.style.display =  "none";
    } else {
        x2.style.display =  "none";
        x3.style.display =  "block";
    }
}

var x2 = document.getElementById("test-move2");
var x3 = document.getElementById("test-move3");
x2.addEventListener("mousemove", func2, false);
x3.addEventListener("mousemove", func2, false);
</script>

 11.pngはスペードAの画像で、39.pngはハート9の画像とします。

 赤字部分は、style="display:none;"のため、最初はハートの9が表示されません。青字部分のmousemoveにより、画像上でマウスが動作する度に関数func2()が呼び出されます。func2()ではdisplay:noneとblockを入れ替えています。

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

スペードA

 画像上でマウスを動かす度に、スペードAとハート9の画像が入れ替わります。

サポート

・サポートするブラウザ

 以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer v9以上
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

 <br>等を除いた多くのタグでサポートされています。

  • このエントリーをはてなブックマークに追加