Use javascript:void(0) with caution, why is it not good to write this way?

Fix a bug in the statement. For IE6, the GIF pause bug after clicking only occurs in the case of "javascript: pseudo protocol without semicolon"

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

Why is it not good to write like this?

Let me provide another perspective.

Adding the href attribute to the tag means the following:

:linkThe selector can select it

a Tags can get focus (can be accessed by pressing the tab key)

In the browser's default style sheet, only the tag with the href attribute has the effect of cursor:pointer (especially in lower versions) on IE).

The tag bound to onclickevent, especially when its function is an ajax request, basically we don’t need this tag The default behavior, and the actual page that cannot be connected, will generally be given the cursor and other styles of this element in CSS. At this time, the href attribute must be added in order to:

allow to respond to keyboard events and gain focus (so that screen readers can read the content behind it and enhance accessibility)

Graceful degradation. When the network connection is poor and the CSS has not been loaded, still has the hand shape and normal link style.

The solutions for giving the tag the href attribute and not connecting it to the actual page are:

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

Their experiences are slightly different.

1, after clicking this link, the page will jump to the head, and # will be added to the end of window.location.href (if there is no # at the end of window.location.href), unless the onclick event is captured and blocked in js Default event.

2 has preliminary semantics. However, if there is an element with the ID nogo in the page, after clicking the link, the anchor point mechanism will work and the page will be aligned with the upper edge of the element. For more details, see Zhang Xinxu's "URL Anchor HTML Positioning Technology Mechanism, Application and Issues"

3 no longer jumps to the page header by default in chrome, 4 no longer jumps to the page header in IE11 Page header. See test below.

5~8 have the same effect, but use javascript pseudo-protocol. Under IE6, after plan 6 and plan 8 without semicolon are clicked, IE6 will pause the gif in the page and trigger the onbeforeunload event (see here for details). IE6 will regard this page as having a redirect and abort it. All requests (see here). So if you replace the src of an after this, IE6 will not complete the new request at all.

I prefer option 4.

As for the semantic usage of LZ such as <a href="javascript:void(0)">, there are already enough detailed answers here. I would like to add that this situation can still support accessible applications. For methods, please refer to "WAI-ARIA Accessible Web Application Properties".

Update, I did the following test:

 <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, when clicking

# and

,

##, the page no longer jumps to the head.

But in IE11 and chrome, clicking all will cause the address bar to be modified and trigger the hashchange event.

Whether you use # or void(0), there is a common disadvantage: doing so will To achieve this behavior, js must be enabled. Don't laugh, although most people load js, we can't rule out accidents such as connection failures, or there are really a few crazy people who don't use js. In addition, js cannot be tracked by search engines, which is an issue that needs to be considered. In this sense, # is even worse, because the semantics of a single # actually implicitly point to the web page itself, which will cause confusion if you use "open in new tab" . And this problem void(0) does not. 【Related Recommendations】

1. Special Recommendation

:"php Programmer Toolbox" V0.1 version Download2.

4. Summary of the difference between href=javascript:void(0) and href=

The above is the detailed content of Use javascript:void(0) with caution, why is it not good to write this way?. For more information, please follow other related articles on the PHP Chinese website!