Element: auxclick イベント

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

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

onauxclick = (event) => {};

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

親である UIEvent および Event から継承したプロパティもあります。

MouseEvent.altKey 読取専用

このマウスイベントが発行されたときに alt キーが押されていた場合は true を返します。

MouseEvent.button 読取専用

このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。

MouseEvent.buttons 読取専用

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

MouseEvent.clientX 読取専用

ビューポート座標におけるマウスポインターの X 座標です。

MouseEvent.clientY 読取専用

ビューポート座標におけるマウスポインターの Y 座標です。

MouseEvent.ctrlKey 読取専用

このマウスイベントが発行されたときに control キーが押されていた場合は true を返します。

MouseEvent.layerX 非標準 読取専用

このイベントの現在のレイヤーにおける相対の水平座標を返します。

MouseEvent.layerY 非標準 読取専用

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

MouseEvent.metaKey 読取専用

このマウスイベントが発行されたときに meta キーが押されていた場合は true を返します。

MouseEvent.movementX 読取専用

前回の mousemove イベントの位置から相対的なマウスポインターの X 座標です。

MouseEvent.movementY 読取専用

前回の mousemove イベントの位置から相対的なマウスポインターの Y 座標です。

MouseEvent.offsetX 読取専用

対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。

MouseEvent.offsetY 読取専用

対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。

MouseEvent.pageX 読取専用

文書全体からの相対的なマウスポインターの X 座標です。

MouseEvent.pageY 読取専用

文書全体からの相対的なマウスポインターの Y 座標です。

MouseEvent.relatedTarget 読取専用

もしあれば、イベントの副ターゲットです。

MouseEvent.screenX 読取専用

スクリーン座標におけるマウスポインターの X 座標です。

MouseEvent.screenY 読取専用

スクリーン座標におけるマウスポインターの Y 座標です。

MouseEvent.shiftKey 読取専用

このマウスイベントが発行されたときに shift キーが押されていた場合は true を返します。

MouseEvent.mozInputSource 非標準 読取専用

イベントを発生させた機器の種類（MOZ_SOURCE_* 定数のいずれか）。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。

MouseEvent.webkitForce 非標準 読取専用

クリックしたときに適用された圧力です。

MouseEvent.x 読取専用

MouseEvent.clientX の別名です。

MouseEvent.y 読取専用

MouseEvent.clientY の別名です。

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

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

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

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

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() を呼び出して、色の変更が適用された後にコンテキストメニューがポップアップするのを防いでいることに注目してください。

• イベントの紹介
• click
• contextmenu
• dblclick
• mousedown
• mouseup
• pointerdown
• pointerup