Event should not trigger on clicking browser scrollbar

[udayakumarswamy]

No description provided.

[ljharb]

I’m not sure what you mean - scrolling certainly shouldn’t trigger a click, since the scroll bar is entirely outside of the viewport (it’s not a DOM element). Can you provide a repro case?

[udayakumarswamy]

@ljharb,
There is a modal popup with window scroll, i want close modal pop on outside click not like on click scrollbar with up/down arrows.

[ljharb]

right - i'm surprised to hear that clicking on any part of the scrollbar would create a click event. That's not been my experience. Can you provide a repro case?

[Hurtak]

I somewhat vaguely remember that back in the day adding click handler to window might register events from scrollbar clicking. Adding the event to document solved this. But this was few years back so my memory is fuzzu, might still happen on Windows/Linux on some browsers, cant reproduce on MacOS.

[udayakumarswamy]

@ljharb and @Hurtak Repo case:
I have a div with some events inside of that, which will appear on hover image.
So, I would like to get an event on clicking outside of the div. I'm able to get it. But, the event should not fire on a browser scrolling bar click.

[forciwc]

I have this same issue that I experienced when using react-dates. Here is a repo case: http://airbnb.io/react-dates. For the default date range picker, clicking the scroll bar closes the date range picker with a mouse down / mouse up event on the entire document. A similar issue existed in bootstrap for modals closing on mouse down. twbs/bootstrap#14263. It seems like scroll bars receive a mouse down / mouse up event, but not a click event.

[ljharb]

If this is a browser bug, then the only way we can get around it is if there’s a way to determine that the event was generated from clicking on the scrollbar. If there is, then this can be fixed; if not, not.

[forciwc]

The only way I can guess is to check if the event.target is the html tag (the entire document) or if the parent element is undefined. Specifically this line in the onMouseDown function:

const isDescendantOfRoot = this.childNode && this.childNode.contains(e.target) && e.target.parentElement !== null;
It is my understanding there should be no way to target the html tag as the body should intercept all events.

Alternatively, addEventListener calls could be updated to listen on document.body, which should also prevent the scrollbar target from intercepting. I changed the code locally, and both options worked for me.

[ljharb]

Hmm - if in fact that's the case (that the target can't ever be the html tag except in this case), and we can verify that in all supported browsers, then that seems like a good approach.

It doesn't seem like a good idea to install more event listeners on the body.