マウスイベント

この章では、マウスイベントとそのプロパティについて詳しく説明します。

注意：このようなイベントは、「マウスデバイス」だけでなく、互換性のためにエミュレートされているスマートフォンやタブレットなどの他のデバイスからも発生する可能性があります。

マウスイベントの種類

これらのイベントの一部はすでに見てきました

mousedown/mouseup

要素の上でマウスボタンがクリック/リリースされます。

mouseover/mouseout

マウスポインタが要素の上/外に出ます。

mousemove

要素上でのマウスの移動ごとに、そのイベントがトリガーされます。

click

マウスの左ボタンが使用されている場合、同じ要素上でmousedownの後にmouseupが発生するとトリガーされます。

dblclick

短時間内に同じ要素を2回クリックするとトリガーされます。最近はめったに使用されません。

contextmenu

マウスの右ボタンを押すとトリガーされます。コンテキストメニューを開く方法は他にもあります。たとえば、特別なキーボードキーを使用すると、その場合にもトリガーされるため、正確にはマウスイベントではありません。

…他にもいくつかのイベントがあります。それらについては後で説明します。

イベントの順序

上記のリストからわかるように、ユーザーアクションによって複数のイベントがトリガーされる場合があります。

たとえば、左ボタンをクリックすると、ボタンが押されたときに最初にmousedownがトリガーされ、ボタンが離されたときにmouseupとclickがトリガーされます。

1つのアクションで複数のイベントが開始される場合、それらの順序は固定されます。つまり、ハンドラはmousedown→mouseup→clickの順序で呼び出されます。

下のボタンをクリックすると、イベントが表示されます。ダブルクリックも試してください。

以下のテストスタンドでは、すべてのマウスイベントが記録され、イベント間に1秒以上の遅延がある場合は、水平線で区切られます。

また、マウスボタンを検出できるbuttonプロパティが表示されます。以下で説明します。

マウスボタン

クリック関連のイベントには、常に正確なマウスボタンを取得できるbuttonプロパティがあります。

通常、clickイベントとcontextmenuイベントには使用しません。前者は左クリックでのみ発生し、後者は右クリックでのみ発生するためです。

一方、mousedownハンドラとmouseupハンドラはevent.buttonが必要になる場合があります。これらのイベントはどのボタンでもトリガーされるため、buttonを使用すると「右mousedown」と「左mousedown」を区別できます。

event.buttonの可能な値は次のとおりです。

ほとんどのマウスデバイスには左右のボタンしかないため、可能な値は0または2です。タッチデバイスも、タップすると同様のイベントを生成します。

また、現在押されているすべてのボタンを整数として持つevent.buttonsプロパティがあり、ボタンごとに1ビットです。実際には、このプロパティはめったに使用されません。必要な場合は、MDNで詳細を確認できます。

修飾子：shift、alt、ctrl、meta

すべてのマウスイベントには、押された修飾キーに関する情報が含まれています。

イベントプロパティ

• shiftKey：Shift
• altKey：Alt（Macの場合はOpt）
• ctrlKey：Ctrl
• metaKey：Macの場合はCmd

イベント中に対応するキーが押された場合、それらはtrueになります。

たとえば、以下のボタンはAlt+Shift +クリックでのみ機能します

<button id="button">Alt+Shift+Click on me!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Hooray!');
    }
  };
</script>

座標：clientX / Y、pageX / Y

すべてのマウスイベントは、2種類の座標を提供します

1. ウィンドウ相対：clientXおよびclientY。
2. ドキュメント相対：pageXおよびpageY。

これらの違いについては、座標の章ですでに説明しました。

要するに、ドキュメント相対座標pageX / Yはドキュメントの左上隅からカウントされ、ページがスクロールされても変化しませんが、clientX / Yは現在のウィンドウの左上隅からカウントされます。ページがスクロールされると、それらは変化します。

たとえば、サイズ500x500のウィンドウがあり、マウスが左上隅にある場合、ページのスクロール方法に関係なく、clientXとclientYは0になります。

マウスが中央にある場合、ドキュメントのどの場所にあるかに関係なく、clientXとclientYは250になります。この点で、それらはposition：fixedに似ています。

入力フィールドにマウスを移動して、clientX / clientYを確認します（例はiframeにあるため、座標はそのiframeに対して相対的です）

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Mouse over me">

mousedownでの選択の防止

マウスのダブルクリックには、一部のインターフェースで邪魔になる可能性のある副作用があります。テキストが選択されます。

たとえば、以下のテキストをダブルクリックすると、ハンドラに加えてテキストが選択されます

<span ondblclick="alert('dblclick')">Double-click me</span>

マウスの左ボタンを押して、離さずにマウスを動かすと、それも選択されますが、多くの場合、これは望ましくありません。

選択を防ぐ方法は複数あり、選択と範囲の章で読むことができます。

この特定のケースでは、最も合理的な方法は、mousedownでブラウザのアクションを防ぐことです。これにより、これらの両方の選択が防止されます

Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Double-click me
</b>
...After

これで、太字の要素はダブルクリックで選択されなくなり、左ボタンを押しても選択が開始されません。

注意：その中のテキストはまだ選択可能です。ただし、選択はテキスト自体ではなく、テキストの前または後で開始する必要があります。通常、これはユーザーにとって問題ありません。

<div oncopy="alert('Copying forbidden!');return false">
  Dear user,
  The copying is forbidden for you.
  If you know JS or HTML, then you can get everything from the page source though.
</div>

まとめ

マウスイベントには、次のプロパティがあります

• ボタン：button。

• 修飾キー（押された場合にtrue）：altKey、ctrlKey、shiftKey、およびmetaKey（Mac）。

  • Ctrlを処理する場合は、Macユーザーを忘れないでください。通常はCmdを使用するため、if（e.metaKey || e.ctrlKey）を確認することをお勧めします。

• ウィンドウ相対座標：clientX / clientY。

• ドキュメント相対座標：pageX / pageY。

mousedownのデフォルトのブラウザアクションはテキスト選択です。インターフェースに適していない場合は、それを防ぐ必要があります。

次の章では、ポインタの動きを追跡するイベントと、その下の要素の変更を追跡する方法について詳しく説明します。