ブラウザでマウスの追加ボタンをリッスンする

ブラウザでマウスの追加ボタンをリッスンする

Logitech マウスの追加ボタンを Web コンテキストで使用したいと思います。

私は Ubuntu を使用していますが (他の OS でも同様のものがあります)、これらのボタンを OS アクションにバインドできます。->回答: 右クリックは JavaScript イベントですか?

通常のボタンと同様に、JavaScript でこのボタンをリッスンしたいと思います。

element.addEventListener(function(evt){
  switch(evt.which){
    case 1: //left click
    case 2: //middle click
    case 3: //right click
    case XX: //other buttons clicks
  }
}

https://stackoverflow.com/a/2405857/1064270

私が見つけた唯一の解決策はブラウザ拡張機能とネイティブメッセージパッシング少なくとも Chrome ではそうです。

だから私はもっと速い道を探しています!

答え1

まず第一に、これはおそらくここではなく、stackoverflow に投稿すべき質問です。

しかし、似たようなものを探していたときに Google でこの質問が表示されたので、他の人も疑問に思うかもしれないので、この質問に答えます。

最大 2 つの追加マウス ボタン (左、中央 (ホイール)、右以外) を検出するための標準仕様があります。

問題は、これがまだどのブラウザにも実装されていないことです。おそらく、詐欺の「罠」にかかってしまう可能性があるためでしょう。

eventハンドラーに渡されるオブジェクトには、.buttonsどのボタンが押されたか (一度に複数のボタンの場合) を示すビットマップであるプロパティがあります。

document.addEventListener('mousedown', function(ev) {
  console.log('MB1', ev.buttons & 1) // 1 if clicked, 0 if not
  console.log('MB2', ev.buttons & 2)
  console.log('MB3', ev.buttons & 4)
  console.log('MB4', ev.buttons & 8) // usually browser-back
  console.log('MB5', ev.buttons & 16)// usually browser-forward
})

最後の 2 つは現在どのブラウザでも登録されず、ブラウザの戻るイベントと進むイベントをオーバーライドすることはできないため、これらのボタンをクリックするとページが変更されます (その動作に設定されている場合)。

関連情報