32

On any page on the site if I middle click the help icon it takes me to the same page but with # appended onto the end of the link. For example, doing so from:

https://stackoverflow.com/

Takes me to:

https://stackoverflow.com/#

I would assume it should take me to the help centre or:

https://stackoverflow.com/help

Tagging as and because I'm not sure which one it is. If this is I would like the behaviour to change to link to the help centre.


Note: I am mainly active over on SFF and I first noticed this behaviour there. A quick cursory check on some other sites (PPCG, Workplace, Software Engineering, Super User) reveals this happens on them too so I'd assume it's network wide.

12
  • Interesting. Ctrl +Click opens the dropdown without navigating.
    – ryanyuyu
    Commented Jun 7, 2018 at 12:37
  • @ryanyuyu Aye does the same on the other menu items too. Commented Jun 7, 2018 at 12:39
  • 3
    It should be noted the "Review" icon works as expected. Middle-click that and you get the "Review" page in a new tab. In fact, the "Help" icon is the only one that displays this behavior- The rest have a page they redirect to.
    – Kendra
    Commented Jun 7, 2018 at 15:55
  • 1
    @Kendra Inbox, reputation, review and the hamburger all work as expected. User profile and "site name" also link to where you'd expect them too. Only help seems to borken. Commented Jun 7, 2018 at 15:57
  • I was literally editing that in as you said that. :)
    – Kendra
    Commented Jun 7, 2018 at 15:57
  • So... if this is a feature-request, I'd downvote it. If it's a bug I wouldn't vote at all... What do I do? :) Commented Jun 7, 2018 at 16:02
  • @MikeMcCaughan You'd upvote it cos That's What Monkey's Do. Commented Jun 7, 2018 at 16:04
  • 1
    @TheLethalCoder I prefer "software simian" thank you very much. Commented Jun 7, 2018 at 16:07
  • Arguably, the Tooltip says "Help Center and other resources" (emphasis mine). So it makes sense we are not redirected to any of these resources for as long as they are not merged in the same single-page.
    – Kaiido
    Commented Jun 8, 2018 at 8:49
  • 1
    No Kaiido: it doesn't make sense to open the same page as you currently are. People trying to open the "Help Center etc." expect at least the Help Center to open.
    – Cœur
    Commented Jun 8, 2018 at 8:52
  • @Cœur it doesn't "open" any page, it just scroll to the first element named "" (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/
    – Kaiido
    Commented Jun 8, 2018 at 8:57
  • Now for a quick workaround, this link could be simply disabled by removing the href altogether since it is not even needed (CSS does handle the cursor pointer)
    – Kaiido
    Commented Jun 8, 2018 at 9:03

1 Answer 1

12

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".

8
  • 12
    So, what about replacing href="#" to href="/help"?
    – Cœur
    Commented Jun 7, 2018 at 15:04
  • 2
    @Cœur: Because clicking the Help button doesn't simply redirect you to the Help page. You get quite a lot of other options.
    – Makoto
    Commented Jun 7, 2018 at 15:40
  • 9
    The same happens with right click + "open in new tab" on Chromium. So I would suggest to just put a useful URL as the link, instead of trying to catch all kinds of interaction. Commented Jun 7, 2018 at 15:40
  • 11
    It's entirely possible with how SO does things to make the icon take you to "help" on a middle click- The review icon does exactly this. It opens a menu on click, opens the "Review" page in a new tab on middle click. Same with the other "menu display" items.
    – Kendra
    Commented Jun 7, 2018 at 15:54
  • 2
    What is the conclusion? Commented Jun 7, 2018 at 19:49
  • @Kendra the main difference between this item and the other ones is that all the other ones points to a document where all sub-items that should have appeared in the dropdown are accessible. /help/ doesn't point to the sub-items contained in its dropdown.
    – Kaiido
    Commented Jun 8, 2018 at 8:54
  • 2
    If you rely on JS to have an element open a menu on click, don't use an anchor but a span tag. If you use an anchor, give it a sensible target url. It's as simple as that.
    – Bergi
    Commented Jun 9, 2018 at 14:26
  • @Bergi true that (I also recommend that in my projects). But say that to a lot developers. I see that pretty frequently. It only does not get discovered often because doing a middle mouse click or running a web browser without an active JavaScript engine is rare. It is a habit of mine to check the linking information at the bottom of the browser when my mouse changes to a pointer icon.
    – KarelG
    Commented Jun 11, 2018 at 6:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .