The difference between a label's href= "javascript:void (0)" and href= "#"

Fix a bug in the story. For IE6, clicking the gif pause bug only occurs when the javascript: pseudo-protocol does not have a semicolon.

Let me give you a perspective.

<a>Adding an href attribute to a tag means the following:

• : The link selector can be selected to it
• This a tag can get focus (can be tab accessed by keystrokes)
• In the browser's default style sheet, there is the effect of the tag with the href attribute <a> cursor:pointer (especially on the lower version of IE).

Binding the tag of the OnClick event <a> , especially when it is an AJAX request, basically we do not use the default behavior of this tag, also can not connect to the actual page, generally also in the CSS to give this element of the cursor and other styles. The href attribute is also added to:

• <a>enough to respond to keyboard events and get focus (so that screen readers can read the content behind and enhance accessibility)
• Graceful downgrade, when the network connection is poor, has not yet loaded into the CSS, <a> still has the hand type and the normal link style.

<a>the scenarios that give labels to the href attribute and do not connect to the actual page are:

1. <a href="#"></a>
2. <a href="#nogo"></a>
3. <a href="##"></a>
4. <a href="###"></a>
5. <a href="javascript:void(0);"></a>
6. <a href="javascript:void(0)"></a>
7. <a href="javascript:;"></a>
8. <a href="javascript:"></a>

There is a slight difference in their experience.

• 1, after clicking this link, will let the page jump to the head, Window.location.href end Add # (if there is no # at the end of Window.location.href), unless the OnClick event is captured in JS and block the default event.
• 2 has the initial semantics. However, if the page has an ID of Nogo element, click on the link, the anchor mechanism will function, the page is attached to the upper edge of the element. More details, see Zhang Xin Xu's "URL anchor point HTML positioning Technology mechanism, application and problems"
• 3 no longer default to the page header in Chrome, 4 no longer jumps to the head of the page in IE11. See Test below.
• The 5~8 function is the same, but the JavaScript pseudo-protocol is used. Under IE6, after the non-semicolon scenario 6 and Scenario 8 are clicked, IE6 will pause the GIF in the page and trigger the onbeforeunload event (see here for details), IE6 as this page has a redirect and abort all requests (see here). So if you replace a src,ie6 after this, the new request will not be completed at all.

I'm more inclined to use scenario 4.

As for the semantic use of the LZ <a href="javascript:void(0)"> , this paste has enough detailed answers. Let me add that this situation can still be supported by accessibility applications, see the Wai-aria Web application properties for accessibility.

Update, I did the following tests:

        <P><Ahref="#" >#</A></P><P><Ahref="# #" >##</A></P><P><Ahref="# # #" >###</A></P><P><Ahref="# # #" >####</A></p> < p> <a href=  "#####" >#####</a> </p> <script type= "Text/javascript" > var n = 0; window.onhashchange =  Function () {alert (++n);} </SCRIPT>          

• In IE11, click # # #, # # # #和 # # #时, the page no longer jumps to the head
• In Chrome, click # #, # # #, # # # #和 # # #时, the page no longer jumps to the head.
• But in IE11 and Chrome, clicking on all <a> will cause the address bar to change and trigger the Hashchange event.

So it's wrong to say "# # #不会造成地址栏的改变" before.

No large-scale testing of other browsers, here to make a preliminary conjecture: # # #的意义在于, which is the fewest number of characters, in all browsers will not cause jumps to the page head of the anchor point.

Harm:

1, javascript: is a pseudo-protocol, non-standard protocol
2, can not smooth degradation, when the user's browser to JS invalid or disabled when clicked on what meaning is not
3, most search engines will not search for it, because there is no content, thus affecting the rankings ( # is not also counted over the chain?) Empty chain is also unfriendly to search engines)

Workaround:

1, will javascript: , # , ### replace the real URL, and cancel <a> the default click event, return false or event.preventDefault , if JS fails the link although the function of the discount, but did not completely fail to achieve a "smooth degradation"

For example: the "invite answer" of the sidebar of this website http://segmentfault.com/q/1010000000339082# can replace the real address http://segmentfault.com/q/1010000000339082 , then continue the event after it

2, the button should not be changed into a button. A lot of people in the "rotten" use <a> , everyone wants it to do <button> things, you can see this article "You can not create a button", said some truth

The difference between a label's href= "javascript:void (0)" and href= "#"