JavaScript: マウスイベント (MouseEvent) 

・div でマウスイベントを拾うサンプル。
  div 上にマウスポインタがある間だけイベントが発生します。
・ブラウザをスクロールしたりリサイズしたり移動したりすると
　座標がどう変わるか？
DIV1
ここにマウスを移動する。
div内のスクロールも確認する。

テキスト1
テキスト2
テキスト3
テキスト4
テキスト5
横スクロール用のテキスト











(2015/03-2024/03)
動作 : Edge120, Firefox120, Chrome119

◎ ノート

・MDN: Element: mousemove イベント

・offsetX, offsetY : 要素の左上が (0,0)。ただしスクロールは考慮しない座標です。
・pageX, pageY     : body 左上が (0,0)。
・clientX, clientY : ブラウザで表示している部分の左上を (0,0)。
・screenX, screenY : ブラウザではなくて画面に対する位置。

◎ div 内でスクロールがあるかどうかにも注意

  1) div 内の表示上の座標か？
  2) div 内のスクロールも考慮した座標か？。

  スクロールも考慮する場合は div.scrollLeft, div.scrollTop 
　を足します。

◎ 昔話

・(2020) offsetX, offsetY を使えます。
  Firefox38 (2015年) まで offsetX, offsetY がなかったので
　使えませんでした。









inserted by FC2 system