Skip to main content
deleted 3 characters in body
Source Link
Mathieu Guindon
  • 71.1k
  • 23
  • 34

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

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

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

Source Link
KarelG
  • 5.2k
  • 2
  • 13
  • 13

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