Javascript :void of 0 problem use explore

  • 2020-03-30 02:36:58
  • OfStack

When working on a page, if you want to do a link and not do anything after clicking, or if you want to do something else in response to a click, you can set its property href = "#". However, there is a problem with this, when the page has a scroll bar, the click will return to the top of the page, which is not a good user experience.

There are several solutions:
1) click on the link and do nothing
 
<a href="javascript:void(0);" >test</a> 
<a href="javascript:;" >test</a> 
<a href="####" >test</a> //Use 2 to 4 #'s, most of which are "####", some of which are "#all" and others

2) after clicking the link, respond to the user-defined click event
 
<a href="javascript:void(0)" onclick="doSomething()">test</a> 
<a href="#" onclick="doSomething();return false;"> What problems have been solved , Including browser incompatibilities </a> //Or just href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a> 

Description:
Javascript :void(0) this kind of pseudo-protocol, write less good, if you have read some web standards book will know why. (do not understand, the original words of the pick, temporary record)
2. Link (href) directly using javascript:void(0) in IE may cause some problems, such as: cause GIF animation to stop playing, so the safest way is to use "####". To prevent clicking on a link from jumping to the top of the page, the onclick event returns false.
3. If you just want to move the mouse over and turn into a hand, you can use it
 
<span style="cursor:pointer" onclick="foo()">Click Me!</span> 

Void is a javascript operator that simply executes an expression but returns no value,
The void operator is used in the following format:
 
javascript:void (expression) 
javascript:void expression 

The second bracketed one is recommended for good program style
We can specify hyperlinks using the void operator, such as javascript:void(document.form.submit()). The expression is evaluated but nothing is loaded in the current document. Void (0) evaluates to 0 but has no effect on JavaScript. A href = "javascript: void (0)" > Is the same as < A href = "javascript: void (1)" > The effect is the same.
The key is to know that void is the operator of javascipt itself, which means that only the expression is executed, but no value is returned!

In addition, the page will automatically return to the top, because the default point position of "#" is top, so this will happen.

Related articles: