Element: auxclick イベント
auxclick イベントは、ポインティングデバイスの第 1 ボタン以外のボタン (マウスの第 1 の—通常は左端の—ボタン) が同じ要素 (Element) 内で押されて離されたとき、その要素で発行されます。
auxclick は、mousedown および mouseup イベントが発生した後に、順に発生します。
| バブリング | あり |
|---|---|
| キャンセル | 可 |
| インターフェイス | MouseEvent |
| イベントハンドラープロパティ | onauxclick (en-US) |
既定のアクションの抑止
Firefox を含む大多数のブラウザーでは、中央クリックを新しいタブでリンクを開く機能にマッピングしていますが、preventDefault() を auxclick イベントハンドラー内で呼び出すことで、この動作を取り消すことができます。
入力やナビゲーションに対応していない要素で発生した auxclick イベントを待ち受ける場合、マウスの中ボタンのダウンアクションにマッピングされた他の既定のアクションを明示的に防止したい場合がよくあります。Windows では自動スクロール、macOS や Linux ではクリップボードの貼り付けなどがこれにあたります。これは、mousedown イベントや pointerdown イベントの既定の動作を防ぐことで実現できます。
さらに、右クリックの後にシステムコンテキストメニューを開かなくする必要がある場合もあります。オペレーティングシステムのタイミングの違いにより、これも auxclick の既定のの動作では防ぐことができません。代わりに、contextmenu イベントの既定の動作を防止することで実現できます。
例
この例では、 onclick と onauxclick (en-US) という 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 = function() {
button.style.backgroundColor = randomColor();
};
button.onauxclick = function(e) {
e.preventDefault();
button.style.color = randomColor();
}
button.oncontextmenu = function(e) {
e.preventDefault();
}
auxclick イベントを onauxclick (en-US) でキャプチャするだけでなく、 contextmenu イベントもキャプチャし、そのイベントで preventDefault() を呼び出して、色の変更が適用された後にコンテキストメニューがポップアップするのを防いでいることに注目してください。
HTML
<button><h1>Click me!</h1></button>
メモ: 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、onauxclick ハンドラーが実行されることがわかります (通常、ゲーミングマウスの「特殊」ボタンも含みます)。
仕様書
| Specification |
|---|
| UI Events # event-type-auxclick |
| HTML Standard # handler-onauxclick |
ブラウザーの互換性
BCD tables only load in the browser