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

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

CSS3 achieves various border effects

Example analysis of mysql variable usage [system variables, user variables]

CSS3 uses var() and calc() functions to achieve animation effects

Solve the problem that document.getElementBy series methods cannot obtain objects

Linux Operation and Maintenance Basic System Disk Management Tutorial

Perfect solution for theme switching based on Css Variable (recommended)

Solution to the failure of MySQL service startup during MySQL 5.7.18 installation

MySQL 5.7.17 compressed package installation and configuration method graphic tutorial

Implementation of Docker data volume operations

MySQL data aggregation and grouping

Recommend

Use of Linux date command

mysql-5.7.28 installation tutorial in Linux

How much do you know about JavaScript inheritance?

How to create a view in MySQL

Examples of simple add, delete, modify, and query operations using mysql statements

Solve the problem that the VMWare virtual machine centos time is inconsistent with the local time

How to insert Emoji expressions into MySQL

Use Docker to create a distributed lnmp image

A case study on MySQL optimization

Detailed explanation of the payment function code of the Vue project

Solve the abnormal error when building vue environment with webpack

Introduction to Jenkins and how to deploy Jenkins with Docker

The difference and usage between div and span

HTML page common style (recommended)

Change the MySQL database engine to InnoDB