5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

マウスホイール(中央ボタン) クリックのイベントはmousedownで

Posted at

リンククリック時のイベントを書いていましたが、リンクはホイールボタンをクリックして別タブで開くこともあります。
その場合、clickイベントでは発火しないため、mousedownイベントで捕捉する必要があります。

すなわち


const clickEvent = (e) => {}

const a = document.querySelector('a')

a.addEventListener('click', clickEvent)
a.addEventListener('mousedown', (e) => {
  if (e.button != 1) {
    return
  }
  clickEvent(e)
})

と中央ボタン判定を加える必要がある。
いっそ左ボタンクリックもmousedownに統合してclickイベントは書かなくてもよい。

clickイベントにも押されたボタンを調べられるbuttonプロパティがあるが、そもそも発火しないため罠というか無駄に継承している感があるような…

左クリックはclick,右クリックは(一応)contextmenuで検知できるのに、中央クリックにイベントがないのは釈然としなかったので調べたが、どうにも見つからない。
wheelイベントもあるのだから、もう一声。あっても良かろうに。

参考

JavaScript 右クリックをキャンセル&処理を割り当てる | TM Life

5
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?