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:<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 #, 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
Recommend
How CSS affects the white screen time during initial loading
Rendering pipeline with external css files In the...
Detailed explanation of how to pass password to ssh/scp command in bash script
Install SSHPASS For most recent operating systems...
How to set static IP in CentOS7 on VirtualBox6 and what to note
Install CentOS 7 after installing VirtualBox. I w...
Research on the problem of flip navigation with tilted mouse
In this article, we will analyze the production of...
Detailed explanation of how to solve the circular reference problem encountered when using JSON.stringify
When programmers do TypeScript/JavaScript develop...
JavaScript counts the number of times a character appears
This article example shares the specific code of ...
Rules for using mysql joint indexes
A joint index is also called a composite index. F...
Vue uses vue meta info to set the title and meta information of each page
title: vue uses vue-meta-info to set the title an...
HTML+CSS to achieve responsive card hover effect
Table of contents accomplish: Summarize: Not much...
After the click event of html hyperlink a, jump to the address pointed to by href
Sometimes, we need to use the hyperlink <a> ...
Use of JavaScript sleep function
Table of contents 1.sleep function 2. setTimeout ...
js to achieve 3D carousel effect
This article shares the specific code for impleme...
Vue-CLI multi-page directory packaging steps record
Page directory structure Note that you need to mo...
Linux server SSH cracking prevention method (recommended)
1. The Linux server configures /etc/hosts.deny to...
Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class
How to modify the style of the el-select componen...