GlobalEventHandlers.onmousemove

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

ユーザーがマウスを移動すると、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 の定義
現行の標準

ブラウザの互換性

BCD tables only load in the browser

関連情報