The expected behavior when clicking on such icons is to open a menu that belongs to the clicked icon. That icon is a svg image wrapped within an anchor element (example is from the help icon):
<a href="#" class="-link js-help-button topbar-icon-on" title="Help Center and other resources">
By default, clicking on an anchor element will navigate the browser to the URL denoted in the href
attribute. Here it is #
. However, with JavaScript, you can add an event listener which is handled before doing this step. This is done here. When clicking on those buttons, a function is called to display an appropriate <div>
element (the menu that you see) on the page. The function also prevents the event being bubbled up, which means that the browser does not navigate you to the URL denoted in the href
attribute.
However, by default, middle clicks are not treated as a simple mouse click event. That leads to the function that stops the bubbling and display the menu thing not being called. So the browser gets a navigation call to the URL denoted in the href
attribute. This is by design. By this, you get navigated to #
. The browser makes it as currentURL#
which is what you see.
If you want to prevent this, you have to listen to "middleclicks" too.
PS: A small info for those that is curious about the "middle click". If your mouse has two buttons and a scrolling wheel, you can do a middle click by pressing the scrolling wheel (if the mouse supports it). Some people may have a mouse with three buttons. Clicking on the middle button performs a ... heh ... "middle click".
feature-request
, I'd downvote it. If it's abug
I wouldn't vote at all... What do I do? :)""
(i.e to the top). Yes, using an anchor that doesn't really link to somewhere is not perfect, but it is so commonly done that we can't even call it bad anymore. And once again, I didn't say it makes sense to use an anchor, but it does make sense we are not redirected to /help/ which doesn't provide any link to any sub-items of the dropdown. So if FR there should be, I think it should be to create a centralised /help-and-others/href
altogether since it is not even needed (CSS does handle thecursor
pointer)