知名度が低いウェブ標準ひとり Advent Calendar 2021 – 07 日目

今日は auxclick というイベントです。右クリックや中クリック等、補助的 (auxiliary(オグジリアリー)) なボタンをクリックした際に発火します。click は主ボタンのみが対象。

「左クリック」等は設定や装置の状況で変わるので適宜変換して読み取ってください。

基本的な使い方

click イベントとほぼ同じで、ただ主ボタン以外のクリック時に発火します。

el.addEventListener('auxclick', (event) => {
  console.log(event.type);
});

飛んでくるのも click イベントと同様 MouseEvent のインスタンスです。event.button の値でどのボタンを押されたのかを判断できます。

使いどころ

リンクを中クリックで別タブで開くやつをキャンセルしたりできるそうです。

コンテキストメニュー制御は contextmenu イベントで

auxclick を preventDefault() してもコンテキストメニューは出てくるので、その制御には向きません。

ブラウザー本来のコンテキストメニューを隠すには contextmenu イベントで event.preventDefault() してやる必要があります。クリック位置もそっちの event.pageX とかで取れます。

Safari は未対応

mousedown とかで頑張りましょう。

英単語 aux (auxiliary)

「補助的な」という意味です。

ちなみに DOM の仕様上は auxiliary button という単語は中ボタンを指します。その文脈では右ボタンは secondary button という表現に。主となる左ボタンは primary button 。

auxclick の説明中に auxiliary という単語は出現せず、代わりに non-primary button と呼ばれています。分かりやすいね。

おしまい

便利な特殊 UI の実装に使うなら良いけど、右クリック禁止系列のﾊﾞﾘﾊﾞﾘ制御はやめて利用者の好きなように操作させてほしいですね。

参考