最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Chrome: Auxiliary Click Event with Middle Mouse Button not fired if page is scrollable - Stack Overflow

programmeradmin1浏览0评论

I try to detect a middle mouse button click on a HTML Custom Element by adding a listener for the auxclick-Event to it. As long as the page is not scrollable, this works totally fine in Chrome on a Win 10 machine.

As soon as the page is scrollable however, the event is not fired anymore and the standard bahavior of a middle click kicks in (scrolling the page by moving the mouse).

Does anyone know a way to work around this issue?

I've created a small CodePen to demonstrate the behavior. Without scrolling it just works fine, but if you unment line 2 in the CSS pane (min-height: 200vh;) the middle click triggers the scrolling behaviour.

I try to detect a middle mouse button click on a HTML Custom Element by adding a listener for the auxclick-Event to it. As long as the page is not scrollable, this works totally fine in Chrome on a Win 10 machine.

As soon as the page is scrollable however, the event is not fired anymore and the standard bahavior of a middle click kicks in (scrolling the page by moving the mouse).

Does anyone know a way to work around this issue?

I've created a small CodePen to demonstrate the behavior. Without scrolling it just works fine, but if you unment line 2 in the CSS pane (min-height: 200vh;) the middle click triggers the scrolling behaviour.

Share Improve this question edited Sep 6, 2021 at 14:00 nioe asked Sep 6, 2021 at 13:28 nioenioe 8861 gold badge9 silver badges16 bronze badges 5
  • is disabling the scroll is a valid answer? document.getElementsByClassName("middle-click")[0].onmousedown = function(e) { if (e.which === 2) { console.log('Disabled'); return false; }}; – iѕєρєня Commented Sep 6, 2021 at 13:39
  • Not really. I'm building a ponent library and don't know on what page these ponents are used. Therefore I cannot simply disable the scrolling. – nioe Commented Sep 6, 2021 at 13:54
  • note that its only disables scrolling by middle click press and only when it happens on your counter element. the scrolling can happen using mouse wheel and using middle mouse button outside that element – iѕєρєня Commented Sep 6, 2021 at 13:58
  • OR you can have the scroll and everything and also count the clicks by something like this: document.getElementsByClassName("middle-click")[0].onmousedown = function(e) { if (e.which === 2) { console.log('Disabled'); const counter = document.querySelector('.counter'); counter.innerText = Number.parseInt(counter.innerText) + 1; }}; – iѕєρєня Commented Sep 6, 2021 at 14:02
  • Ah, sorry. Now I got what you meant. Disabling the scrolling didn't do the trick, but when I call preventDefault() on the Mouse Down Event, it seems to work: codepen.io/nioe/pen/rNwWWZj – nioe Commented Sep 6, 2021 at 14:11
Add a ment  | 

1 Answer 1

Reset to default 10

Kudos to iѕєρєня for pointing me into the right direction.

If I listen to the mousedown-Event too, check if it has been fired from a middle click and then prevent the default behaviour, everything seems to work fine.

Checkout the updated CodePen for the full solution.

I still think that this is kind of a hack. If somebody knows why Chrome does behave like this, I would be glad, if you'd share it here. ;)

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论