Javascript:void (0) The problem

Source: Internet
Author: User

I've seen several posts on <a> labels and javascript:void (0) Recently, and I'd like to keep them in mind.
Note: The following code is not fully tested, but the scenario that each method may appear is basically explained.

When making a page, if you want to do a link click Do not do anything, or in response to click to complete other things, you can set its properties href = "#", but this will have a problem, that is, when the page has a scroll bar, click will return to the top of the page, the user experience is not good.

There are currently several solutions:
1) Don't do anything after clicking on the link

    1. 1.<a href="javascript:void (0);" >test</a>
    2. 2.<a href="javascript:;" >test</a>
    3. 3.<a href="# # # >test</a> //Use 2 to 4 #, see mostly" # # # ", also use" #all "and other


2) Click on the link to respond to user-defined click events

    1. 1.<a href="javascript:void (0)" onclick="dosomething ()" >test</a>
    2. 2.<a href="#" onclick="dosomething (); return false;" > What issues are resolved, including browser incompatibility issues </a> //or direct use of href= ""
    3. 3.<a href="#" onclick="alert (); event.returnvalue=false;" >test</a>


Description
1.javascript:void (0) This pseudo-protocol, write less good, if you have read some of the Web Standard books will know why. (Do not understand, the exact words picked, the record)
2. Link (href) direct use of javascript:void (0) in IE may cause some problems, such as: Cause GIF animation to stop playback, so the safest way is to use "# # #". To prevent clicking on a link and jumping to the top of the page, the OnClick event will return false.
3. If you just want to move the mouse over, turn into a hand, you can use

    1. <span style="Cursor:pointer" onclick="foo ()" >click me!</span>



Void is the JavaScript operator, meaning: Only the expression is executed, but no return value is
The void operator uses the following format:

    1. 1. javascript:void (expression)
    2. 2. javascript:void expression


For a good program style, the second type of parentheses is recommended.
We can use the void operator to specify hyperlinks, such as Javascript:void (Document.form.submit ()). The expression is evaluated but does not load any content at the current document, void (0) evaluates to 0, but does not have any effect on JavaScript, that is, <a href= "javascript:void (0)" > Effect with <a href= " Javascript:void (1) "> The effect is the same.
The key is to know that void is an operator of the Javascipt itself, which represents the execution of an expression only, but no return value!

In addition, the page is automatically recalled to the top because the "#" Default point of Sight is top, so this happens.

The void operator returns undefined for any value, which is commonly used to block browser default behavior.

Code meaning Mencius to say

This is equivalent to replacing the page # anchor Point

Roughly the same as
<a href= "#" > or <a href= "javascript:;" >

The difference is that the empty anchor point will cause the page to return to the top, while JavaScript; Javascript:void (0), does not cause the page to return to the top

Javascript:void (0) The problem

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.