javascript: With Javascript:void (0) Introduction _javascript tips

Source: Internet
Author: User

I have recently read several posts on <a> tags and javascript:void (0), and I would like to keep this in mind for your reference.
Note: The following code is not fully tested, but the situation that each method may appear is largely explained.
When making a page, if you want to do a link click Do not do anything, or respond to click and complete other things, you can set its properties href = "#", however, 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.

Currently, there are several solutions:

1 Click on the link and do nothing.

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


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

<a href= "javascript:void (0)" onclick= "dosomething ()" >test</a> 
<a href= "#" onclick= "DoSomething ( ), return false; > solved any problems, including browser incompatibility </a>//or direct use of href= "" 

Description

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

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

Void is the operator of JavaScript, meaning that only the expression is executed, but no return value is returned.
void operator Usage format is as follows:

Javascript:void (expression)  
javascript:void expression  

For a good program style, it is recommended to use the second type of parentheses
We can use the void operator to specify a hyperlink, such as Javascript:void (Document.form.submit ()). The expression is evaluated but does not load any content in the current document, void (0) evaluates to 0, but has no effect on JavaScript, meaning that <a href= "javascript:void (0)" > has the same effect as <a href= " Javascript:void (1) "> effect is the same.
The key is to know that void is the operator of the javascipt itself, and it represents an expression that executes only, but does not return a value!
The other page will automatically come back to the top because the "#" Default point of sight is tops, so this can happen.

Keep explaining.

The code that I want to use for Ajax is common:
<a href= "Javascript:dotest2 (); void (0);" >here</a>
But what does void (0) mean here?

In JavaScript, Void is an operator that specifies that you want to evaluate an expression but not return a value.

void operator usage format is as follows:

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

Expression is an expression of the Javascript standard to compute. The parentheses on the outer side of the expression are optional, but it is a good habit to write. (Implementation version Navigator 3.0)

You specify the hyperlink using the void operator. The expression is evaluated but no content is loaded at the current document.

The following code creates a hyperlink that will not happen after the user. When the user links, void (0) evaluates to 0, but there is no effect on Javascript.

<a href= "javascript:void (0)" > single here Nothing's going to happen </A>

The following code creates a hyperlink that submits the form when the user orders.

<a href= "Javascript:void (Document.form.submit ())" > single here submit the form </A>

A href= #与 a href=javascript:void (0) A few ways of distinguishing links

#包含了一个位置信息

The default anchor is #top, the upper end of the Web page.

and javascript:void (0) only represents a dead link

This is why sometimes the page is very long browsing links is clearly

Beat to the top of the page

and javascript:void (0) is not so

So the best time to invoke a script is void (0)

or <input onclick>.

<div onclick>, etc.

Several ways to link
1.window.open (' url ')

2. Use Custom function

<script>
function Openwin (tag,obj)
 {
  obj.target= "_blank";
  Obj.href = "web/substation/substation.aspx?stationno=" +tag;
  Obj.click ();
  }
</script>

<a href= "javascript:void (0)" onclick= "Openwin (3,this)" > Zhuzhou </a>

Window.location.href= ""

href= "#" contains a location information. The default anchor is the #top, which is the top of the page, which can cause the browser to collapse or even crash when you click the link continuously.

Of course we usually use three href= "###", but read this article we can use JavaScript later:;(a colon a semicolon)

In JavaScript, Void is an operator that specifies that you want to evaluate an expression but not return a value.

javascript: Better, javascript:void (0); it is said that in some cases there are browser-compatible bugs. (this point of the bug I do not know when to appear, know the children's shoes please advise).

Can be written as javascript:;,qq space many are written in javascript:;
I feel that there is no difference between the two, is to execute an empty event.
javascript:; even less than 7 characters, hehe.

Sina Weibo is written by javascript:void (0);

I used to write javascript:void (0), but now it's all javascript:;

A href= "#" > click on the link, the page will scroll up to the top of the page, # The default anchor point is #TOP
<a href= "javascript:void (0)" onclick= "window.open ()" > click the link after the page does not move, just open the link
<a href= "#" onclick= "Javascript:return false;" > function ditto, different browsers will have differences.

Click on the link, do not want to roll the page to the top of the page, use href= "javascript:void (0)", do not use href= "#", return false also has a similar effect

Detailed href= "#" and href= "javascript:void (0)" Difference

"#" contains a location information
The default anchor point is #top, which is the top of the page.
and javascript:void (0) only represents a dead link
This is why sometimes the page is very long to browse the link obviously is the # but beat to the top of the page
and javascript:void (0) is not so
So the best time to invoke a script is void (0)
or <input onclick>.
<div onclick>, etc.
Several ways to open a new window link
1.window.open (' url ')
2. Use Custom function

Copy Code code as follows:

<script>
function Openwin (tag,obj)
{
Obj.target= "_blank";
Obj.href = "web/substation/substation.aspx?stationno=" +tag;
Obj.click ();
}
</script>
<a href= "javascript:void (0)" onclick= "Openwin (3,this)" >LINK_TEST</a>

Window.location.href= ""

if it is a #, there will be jumps to the top of the situation, the personal collection of several solutions:
1:<a href= "#" ></a>
2:<a href= "javascript:void (0)" ></a>
3:<a href= "javascript:void (null)" ></a>
4:<a href= "#" onclick= "return false" ></a>
5:<span style= "Cursor:hand" ></span> (as if not shown in FF)

careful use of javascript:void (0)
Today, when debugging CGI, clearly CGI program has been executed, and the final result is correct, but the page is not refreshed. In the FireFox2.0 test, the result is normal, IE6 but not refreshing! After careful investigation, found that the CGI page link is <a href= "javascript:void (0)" onclick= "Xxx_func ();" ....> only a sample </a> The problem is in this void ( 0) on! Let's look at the meaning of Void (0) in JavaScript first:
In JavaScript, Void is an operator that specifies that you want to evaluate an expression but not return a value.
void operator usage format is as follows:
1. Javascript:void (Expression_r_r)
2. Javascript:void Expression_r_r
Expression_r_r is an expression of the JavaScript standard to compute. The parentheses outside the expression are optional, but writing is a good habit. We can use the void operator to specify a hyperlink. The expression is evaluated but does not load any content in the current document. Surface code creates a hyperlink that will not happen when the user clicks on it. When the user clicks on the link, void (0) evaluates to 0, but there is no effect on JavaScript.
<a href= "javascript:void (0)" > Click here Nothing will happen </a>
That is, you can use void (0) to perform some processing, but not to refresh the page as a whole, but be careful when you need to refresh the page.
In fact, we can use <a href= "javascript:void (Document.form.submit)", this sentence will be a submit operation. What is the case with void (0) More? No refresh, of course, Ajax, look at the AJAX Web page, you will generally see a lot of void (0),: So in the use of void (0) before, it is best to think about whether the page needs to be overall refreshed.

When using JavaScript, we usually go through something like:
<a href= "#" onclick= "javascript: Method" > Submit </a>
Way to invoke the JavaScript method through a pseudo link. One of the problems with this approach is:
While clicking on the link does not jump the page. But the scroll bar rolls up, and the solution is to return a false.
As shown below:
<a href= "#" onclick= "javascript: method; return false;" > Submit </a>

You can also use ###

A href= "javascript:void (0)" onclick= "javascript: method; return false;" Submit
Javascript:void (0) will not jump up:)

There is another way to #this
A href= "#this" onclick= "javascript: Method"

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.