GlobalEventHandlers.onmousemove

onmousemoveGlobalEventHandlers ミックスインのプロパティで、mousemove イベントを処理するイベントハンドラーです。

ユーザーがマウスを移動すると、mousemove イベントが発生します。

構文

target.onmousemove = functionRef;

functionRef は、関数名または関数式です。 この関数は、唯一の引数として MouseEvent オブジェクトを受け取ります。

ツールチップ

この例では、マウスに追従するリンクのツールチップを作成します。これは、onmousemove, onmouseover, onmouseout イベントハンドラーを使用します。

HTML

<p><a href="#" data-tooltip="First link">See a tooltip here &hellip;</a></p>
<p><a href="#" data-tooltip="Second link">&hellip; or here!</a></p>

CSS

.tooltip {
  position: absolute;
  z-index: 9999;
  padding: 6px;
  background: #ffd;
  border: 1px #886 solid;
  border-radius: 5px;
}

JavaScript

const tooltip = new (function() {
  const node = document.createElement('div');
  node.className = 'tooltip';
  node.setAttribute('hidden', '');
  document.body.appendChild(node);

  this.follow = function(event) {
    node.style.left = event.clientX + 20 + 'px';
    node.style.top = event.clientY + 10 + 'px';
  };

  this.show = function(event) {
    node.textContent = event.target.dataset.tooltip;
    node.removeAttribute('hidden');
  };

  this.hide = function() {
    node.setAttribute('hidden', '');
  };
})();

const links = document.querySelectorAll('a');

links.forEach(link => {
  link.onmouseover = tooltip.show;
  link.onmousemove = tooltip.follow;
  link.onmouseout = tooltip.hide;
});

結果

ドラッグ可能な要素

また、ドラッグ可能なオブジェクトで onmousemove イベントハンドラーを使用する例も用意しています。実際の例をご覧ください

仕様

仕様書 状態 備考
HTML Living Standard
onmousemove の定義
現行の標準

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onmousemoveChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報