Question: Why use href= "javascript:void (0);"?

Adding the href attribute to <a> tags means the following:





: Link selector can choose to it





this a tag to get focus (you can access it through the TAB key)





in the browser's default style sheet, the <a> tag with the href attribute has cursor:pointer effects (especially on lower versions of IE).





bound the onclick event <a> tag, especially its role is the AJAX request, basically we do not use the default behavior of this label, also not connected to the actual page, generally also in the CSS to give this element cursor and other styles. The href attribute is added to:





gives <a> enough to respond to keyboard events and gain focus (so that screen readers can read behind and enhance accessibility)





graceful downgrade, in the network connection is very poor, has not loaded into the CSS when,<a> still have hand-type and normal link style.





gives <a> tags to the href attribute and does not connect to the actual page of the scenario:





<a href= "#" ></a>





<a href= "#nogo" ></a>





<a href= "# #" ></a>





<a href= "###" ></a>





<a href= "javascript:void (0);" ></a>





<a href= "javascript:void (0)" ></a>





<a href= "javascript:;" ></a>





<a href= "javascript:" ></a>





their experiences are slightly different.





1, click this link, will let the page jump to the head, Window.location.href at the end of the increase # (if the end of the Window.location.href No #), unless in JS to capture the onclick event and prevent the default event.





2 has initial semantics. However, if the page has an ID nogo element, click on the link, the anchor mechanism will function, the page is affixed to the upper edge of this element. More detailed, see Zhang Xu's "URL anchor point HTML positioning Technology mechanism, application and problems"





3 no longer defaults to the page header in Chrome, 4 no longer jumps to the page head in IE11. Normal clicks do not increase in the address bar #, but if the user uses the open in new tab (for example, the middle key), it jumps to the shape like http://segmentfault.com/q/1010000000339082## #的地址, see below Test.




The
5~8 function the same, but the JavaScript pseudo protocol is used. Under IE6, when this a tag is clicked, the IE6 will pause the GIF in the page and trigger the onbeforeunload event (see here for details) IE6 that the page has been redirected and abort all subsequent requests (refer here). So if you replace a <img> src,ie6 after this, you won't be able to complete this new request at all.





so I prefer to use scenario 4.





As for the semantic LZ this <a href= "javascript:void (0)" > usage, ls Many people have enough detailed answers. I would add that this situation can still be done in search engine friendly support accessibility, methods, please refer to the "Aria Accessibility Web application properties."





Update, I did the following tests:





<p>





<a href= "#" >#</a>





</p>





<p>





<a href= "# #" >##</a>





</p>





<p>





<a href= "###" >###</a>





</p>





<p>





<a href= "#" >####</a>





</p>





<p>





<a href= "#####" >#####</a>





</p>





<script type= "Text/javascript" >





var n = 0;





Window.onhashchange = function () {





alert (++n);





　　}





</script>





in IE11, click ###, ### #和 #时, page no longer jump to the head





in Chrome, click # #, ###, ### #和 #时, the page no longer jumps to the head.





but in IE11 and Chrome, clicking All <a> will cause the address bar to change and trigger the Hashchange event.





so before said "# # #不会造成地址栏的改变" is wrong.





no large-scale test of other browsers, here to do a preliminary guess: # # #的意义在于, this is the least number of characters, in all browsers will not cause jump to the page head anchor points.





again, this question has sparked a lot of friendly discussions about semantics.





I agree with @fox classmate "don't abuse A to replace button".




The problem with
is that if you need to use the button, the semantics are resolved, and the multi browser style is compatible with the pit dad ...





this I have answered before, just Shun (Yi) to mention it: how to ensure that the browser <input><button> definition of the same button size?