Element: auxclick イベント

構文

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

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

onauxclick = (event) => {};

イベント型

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

イベントプロパティ

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

PointerEvent.altitudeAngle 読取専用

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

PointerEvent.azimuthAngle 読取専用

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

PointerEvent.persistentDeviceId 読取専用

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 イベントの既定の動作を防止することで実現できます。

例

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

JavaScript

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

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

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

button {
  border: 0;
  background-color: white;
  font-size: 8vw;
  display: block;
  width: 100%;
  height: 100%;
}

h1 {
  letter-spacing: 0.5rem;
}

仕様書

ブラウザーの互換性

関連情報

• 学習: イベント入門
• click
• contextmenu
• dblclick
• mousedown
• mouseup
• pointerdown
• pointerup