JavaScript: マウスイベント処理

概略

• MDN: MouseEvent

座標のプロパティ

• MDN: MouseEvent: screenX プロパティ
• MDN: MouseEvent: pageX プロパティ
• MDN: MouseEvent: clientX プロパティ
• MDN: MouseEvent: offsetX プロパティ

(関連) draggable 属性で処理する (2024/01)

こちらは MouseEvent を使わない話です。

HTML の draggable 属性 を使うと MouseEvent で処理するよりも 細かい処理の記述が不要になりプログラムが簡単になります。 最初に 1) draggable 属性でも間に合う処理か？、2) MouseEvent が必要な処理か？、検討してみてください。

• JavaScript: draggable 属性でドラッグ操作する
• svg タグ: JavaScript: ドラッグ操作

基本的なサンプル

マウスイベントで得られる座標

ドラッグ操作をマウスイベントで処理 (2024)

MouseEvent を使う処理は draggable 属性のような大雑把な移動ではなくて、 正確に位置を合わせたり、細かい処理を入れたりする用途に適しています。

• イベント処理は this が混乱しやすいので注意が必要です。
  JavaScript: this
  

マウスホイールのサンプル

• TestJS_mouse_event_wheel01.html
  ホイールイベントの値を見る。

マウスホイールで img 画像を拡大縮小表示する

• imgタグ: JavaScript: マウスで処理する
• TestJS_img_resize_mouse_wheel01.html (2021)
  単純な拡大縮小表示。
• TestJS_img_resize_mouse_wheel02.html (2021)
  クリックした場所を中心に拡大縮小する。スクロール (scrollTop, scrollLeft)で調整。
  
• TestJS_fileapi_ImageFile_img02.html (2021)
  クリックした場所を中心に拡大縮小する。 img を absolute で配置し top, left で調整。

ツールサンプル

• JavaScript: ツールサンプル (2)
• TestJS_fileapi_ImageFile_img02.html (2021)
  画像ファイルを読んで表示。ImageFile.js のテスト。
  FileAPI、ドラッグ＆ドロップ、クリップボードからペーストの処理。
  画像はマウスでドラッグ移動や拡大縮小できます。
  JavaScript: ファイル処理 FileAPI
  imgタグ: JavaScript サンプル
  

関連

• CSS: resize: 要素の大きさを手動操作で変更する
• JavaScript: イベント処理 (1)
• JavaScript: イベント処理 (2)
• JavaScript: タッチイベントの処理
• JavaScript: キー入力の処理
• JavaScript: draggable 属性でドラッグ操作する
• svg タグ: JavaScript: ドラッグ操作
• JavaScript ツールサンプル (2)