Element: auxclick イベント
auxclick
イベントは、ポインティングデバイスの第 1 ボタン以外のボタン(マウスの第 1 の—通常は左端の—ボタン)が同じ要素(Element
)内で押されて離されたとき、その要素で発行されます。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("auxclick", (event) => {});
onauxclick = (event) => {};
イベント型
MouseEvent
です。 Event
を継承しています。
イベントプロパティ
親である UIEvent
および Event
から継承したプロパティもあります。
MouseEvent.altKey
読取専用-
このマウスイベントが発行されたときに alt キーが押されていた場合は
true
を返します。 -
このマウスイベントが発行されたときに押されていたボタンの番号です(もしあれば)。
-
このマウスイベントが発行されたときに押されていたボタンです(もしあれば)。
MouseEvent.clientX
読取専用-
ビューポート座標におけるマウスポインターの X 座標です。
MouseEvent.clientY
読取専用-
ビューポート座標におけるマウスポインターの Y 座標です。
MouseEvent.ctrlKey
読取専用-
このマウスイベントが発行されたときに control キーが押されていた場合は
true
を返します。 MouseEvent.layerX
Non-standard 読取専用-
このイベントの現在のレイヤーにおける相対の水平座標を返します。
MouseEvent.layerY
Non-standard 読取専用-
このイベントの現在のレイヤーにおける相対の垂直座標を返します。
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.screenX
読取専用-
スクリーン座標におけるマウスポインターの X 座標です。
MouseEvent.screenY
読取専用-
スクリーン座標におけるマウスポインターの Y 座標です。
MouseEvent.shiftKey
読取専用-
このマウスイベントが発行されたときに shift キーが押されていた場合は
true
を返します。 MouseEvent.mozInputSource
Non-standard 読取専用-
イベントを発生させた機器の種類(
MOZ_SOURCE_*
定数のいずれか)。 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます(これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません)。 MouseEvent.webkitForce
Non-standard 読取専用-
クリックしたときに適用された圧力です。
MouseEvent.x
読取専用-
MouseEvent.clientX
の別名です。 MouseEvent.y
読取専用-
MouseEvent.clientY
の別名です。
既定のアクションの抑止
大多数のブラウザーでは、中央クリックを新しいタブでリンクを開く機能に割り当てていますが、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>
メモ: 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、onauxclick
ハンドラーが実行されることがわかります(通常、ゲーミングマウスの「特殊」ボタンも含みます)。
仕様書
Specification |
---|
UI Events # event-type-auxclick |
HTML Standard # handler-onauxclick |
ブラウザーの互換性
BCD tables only load in the browser