onmousemoveイベント

DOM イベント MouseEvent

定義と用法

onmousemoveイベントは、指が要素上を動かしたときに発生します。

例

例 1

マウスカーソルを<div>要素上に移動すると、JavaScriptを実行します：

<div onmousemove="myFunction()">Move the cursor over me</div>

自分で試してみてください

例2

この例では、onmousemove、onmouseenter、およびmouseoverイベントの違いを示しています：

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
  <p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
  <p id="demo3">I will demonstrate onmouseover!</p>
</div>

自分で試してみてください

例3

この例では、onmousemove、onmouseleave、およびonmouseoutイベントの違いを示しています：

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p id="demo2">I will demonstrate onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
  <p id="demo3">I will demonstrate onmouseout!</p>
</div>

自分で試してみてください

文法

HTMLで：

<element onmousemove="myScript">

自分で試してみてください

JavaScriptで：

object.onmousemove = function(){myScript};

自分で試してみてください

JavaScriptでaddEventListener()メソッドを使用する方法：

object.addEventListener("mousemove", myScript);

自分で試してみてください

注釈：Internet Explorer 8またはそれ以前のバージョンではサポートしていません addEventListener()メソッド。

技術的な詳細

バブル： サポート
キャンセル可能： サポート
イベントタイプ： MouseEvent
サポートされているHTMLタグ： すべてのHTML要素は以下の要素を除いて：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>および<title>をサポートしていません。
DOM バージョン： レベル2 イベント

ブラウザサポート

イベント Chrome IE Firefox Safari Opera
onmousemove サポート サポート サポート サポート サポート
DOM イベント MouseEvent