Detailed explanation of the difference between a href=# and a href=javascript:void(0)

a href="#"> After clicking 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()"> After clicking the link, the page does not move, only the link is opened

<a href="#" onclick="javascript:return false;"> Same effect as above, different browsers may have differences.

If you don't want the page to scroll to the top after clicking a link, use href="javascript:void(0)" instead of href="#". return false also has a similar effect.

Detailed explanation of the difference between href="#" and href="javascript:void(0)"

"#" contains a location information. The default anchor is #top, which is the top of the web page. JavaScript:void(0) only indicates a dead link. This is why sometimes the page is very long and the browsing link is clearly #, but it jumps to the top of the page. JavaScript:void(0) is not like this. Therefore, it is best to use void(0) when calling scripts.
or <input onclick>
<div onclick> etc.

Several ways to open links in new windows

1.window.open('url')
2. Use custom functions

Copy code

The code is as follows:

window.location.href=""
-------------------------------------------------------------------------------
If it is a #, it will jump to the top. Here are some solutions I have collected:
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> (seems not to be displayed in FF)
-------------------------------------------------------------------------------
Use JavaScript with caution: void(0)

When I was debugging CGI today, the CGI program was clearly executed and the final result was correct, but the page just didn't refresh. When tested under FireFox2.0, the result is normal, but IE6 just doesn't refresh! After careful investigation, I found that the cgi page link is <a href="javaScript:void(0)" OnClick="XXX_Func();" ….> only a sample </a>, and the problem lies in this void(0)! Let's first look at the meaning of void(0) in JavaScript:
In JavaScript, void is an operator that specifies that an expression is to be evaluated but no value is returned.

The void operator usage format is as follows:

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

expression_r_r is a JavaScript standard expression to be evaluated. The parentheses around the expression are optional, but it is good practice to include them. We can specify hyperlinks using the void operator. The expression will be evaluated but nothing will be loaded into the current document. The following code creates a hyperlink that does nothing when the user clicks it. When the user clicks the link, void(0) evaluates to 0, but has no effect on the JavaScript.
<a href="javascript:void(0)">Clicking here will do nothing</a>
That is to say, if you want to perform some processing but do not refresh the entire page, you can use void(0), but if you need to refresh the page, you must be careful.
In fact, we can use <a href="javascript:void(document.form.submit())"> like this, this sentence will perform a submit operation. So in what situations is void(0) used more often? No refresh? Of course it's Ajax. If you look at Ajax web pages, you'll generally see a lot of void(0) :), so before using void(0), it's best to think about whether the page needs to be refreshed as a whole.

When using javascript, we usually use something like:

<a href="#" onclick="javascript:method">Submit</a>
The method calls the javascript method through a pseudo link. One problem with this method is:
Although the page will not jump when clicking the link, the scroll bar will scroll up. 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 :)

Another method is #this

a href="#this" onclick="javascript:method"

<<: Detailed explanation of the solution to duplicate insertion of MySQL primary key and unique key

>>: How to create a web wireframe using Photoshop

Mobile front-end adaptation solution (summary)

Detailed explanation of the difference between a href=# and a href=javascript:void(0)

Mobile front-end adaptation solution (summary)

How to implement CSS mask full screen center alignment

Implementation steps for docker deployment lnmp-wordpress

Detailed explanation of the execution process of mysql update statement

How to implement nested if method in nginx

Introduction to ufw firewall in Linux

The correspondence between Tomcat and JDK versions and the features of each Tomcat version

How to enable Flash in Windows Server 2016

Detailed explanation of Nginx current limiting configuration

View disk IO in Linux and find out the processes that occupy high IO read and write

Recommend

After idea publishes web project, Tomcat server cannot find the project and its solution

Detailed explanation of the use of docker tag and docker push

Analysis of the reasons why MySQL field definitions should not use null

Analysis of the Nesting Rules of XHTML Tags

HTML table tag tutorial (24): horizontal alignment attribute of the row ALIGN

Detailed process of installing logstash in Docker

CentOS7.x uninstall and install MySQL5.7 operation process and encoding format modification method

How to remove the dotted border when clicking a link in FireFox

Detailed explanation of docker's high availability configuration

MySQL 5.6 decompressed version service cannot be started due to system error 1067

How to set process.env.NODE_ENV production environment mode

Detailed description of the function of meta name="" content="

Detailed analysis of javascript data proxy and events

How to deploy DoNetCore to Alibaba Cloud with Nginx

Detailed explanation of the solution to font blur when using transform in CSS3