Element: auxclick イベント

auxclick イベントは、ポインティングデバイスの第 1 ボタン以外のボタン(マウスの第 1 の—通常は左端の—ボタン)が同じ要素(Element)内で押されて離されたとき、その要素で発行されます。

auxclick は、mousedown および mouseup イベントが発生した後に、順に発生します。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("auxclick", (event) => {});

onauxclick = (event) => {};

イベント型

PointerEvent です。 Event を継承しています。

Event UIEvent MouseEvent PointerEvent

メモ: この仕様書の初期のバージョンでは、このイベントのイベント型は MouseEvent でした。詳しくはブラウザーの互換性をご覧ください。

イベントプロパティ

このインターフェイスは、MouseEvent および Event からプロパティを継承しています。

PointerEvent.altitudeAngle 読取専用

トランスデューサー(ポインターまたはスタイラス)の軸と機器の画面の X-Y 平面のなす角度を表します。

PointerEvent.azimuthAngle 読取専用

Y-Z 平面と、トランスデューサー(ポインターまたはスタイラス)の軸と Y 軸の両方を格納する平面との間の角度を表します。

PointerEvent.persistentDeviceId 読取専用 Experimental

PointerEvent を生成するポインティングデバイス用の固有の識別子。

PointerEvent.pointerId 読取専用

イベントの原因となっているポインターの一意の識別子。

PointerEvent.width 読取専用

ポインターの接触形状の幅(X 軸上の大きさ、CSS ピクセル単位)。

PointerEvent.height 読取専用

ポインターの接触形状の高さ(Y 軸上の大きさ、CSS ピクセル単位)。

PointerEvent.pressure 読取専用

0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。

PointerEvent.tangentialPressure 読取専用

ポインター入力の正規化された接線圧力(バレル圧力またはシリンダー応力(cylinder stress)とも呼ばれます)は -1 から 1 の範囲で、 0 はコントロールの中立位置です。

PointerEvent.tiltX 読取専用

Y-Z 平面と、ポインター(ペン/スタイラスなど)軸と Y 軸の両方を含む平面との間の平面角度(度単位、-90 から 90 の範囲)。

PointerEvent.tiltY 読取専用

X-Z 平面と、ポインター(ペン/スタイラスなど)軸と X 軸の両方を含む平面との間の平面角度(度単位、-90 から 90 の範囲)。

PointerEvent.twist 読取専用

ポインター(ペン/スタイラスなど)の長軸を中心とした時計回りの回転の度数(0 から 359 の範囲の値)。

PointerEvent.pointerType 読取専用

イベントの原因となった機器の種類(マウス、ペン、タッチなど)を示します。

PointerEvent.isPrimary 読取専用

ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。

既定のアクションの抑止

大多数のブラウザーでは、中央クリックを新しいタブでリンクを開く機能に割り当てていますが、preventDefault()auxclick イベントハンドラー内で呼び出すことで、この動作を取り消すことができます。

入力やナビゲーションに対応していない要素で発生した auxclick イベントを待ち受ける場合、マウスの中ボタンのダウンアクションにマッピングされた他の既定のアクションを明示的に防止したい場合がよくあります。Windows では自動スクロール、macOS や Linux ではクリップボードの貼り付けなどがこれにあたります。これは、mousedown イベントや pointerdown イベントの既定の動作を防ぐことで実現できます。

さらに、右クリックの後にシステムコンテキストメニューを開かなくする必要がある場合もあります。オペレーティングシステムのタイミングの違いにより、これも auxclick の既定のの動作では防ぐことができません。代わりに、contextmenu イベントの既定の動作を防止することで実現できます。

この例では、 onclickonauxclick という 2 つのイベントハンドラー関数を定義しています。前者はボタンの背景色を変更し、後者はボタンの前景(テキスト)の色を変更します。また、このデモを多ボタンマウスで試すことで、2 つの関数が動作する様子を見ることができます(GitHub でライブで見ることができ、ソースコードを見ることもできます)。

JavaScript

js
let button = document.querySelector("button");
let html = document.querySelector("html");

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
  return `rgb(${random(255)} ${random(255)} ${random(255)})`;
}

button.onclick = () => {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = (e) => {
  e.preventDefault();
  button.style.color = randomColor();
};

button.oncontextmenu = (e) => {
  e.preventDefault();
};

auxclick イベントを onauxclick でキャプチャするだけでなく、 contextmenu イベントもキャプチャし、そのイベントで preventDefault() を呼び出して、色の変更が適用された後にコンテキストメニューがポップアップするのを防いでいることに注目してください。

HTML

html
<button><h1>Click me!</h1></button>

メモ: 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、onauxclick ハンドラーが実行されることがわかります(通常、ゲーミングマウスの「特殊」ボタンも含みます)。

仕様書

Specification
UI Events
# event-type-auxclick
HTML
# handler-onauxclick

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
auxclick event
Is a PointerEvent
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報