Detailed explanation of the execution order of onclick and href of a tag in html

The onclick event is executed first, followed by the one defined in href (page jump or javascript)

When there are two definitions at the same time (onclick and href are both defined), if you want to prevent href Action, return false must be added to onclick; usually write onclick="xxx();return false;".

If the function defined in href has a return value, the content of the current page will be The return value is used instead of

If the page is too long and has scroll bars, and you want to perform operations through the onclick event of the link. Its href attribute should be set to javascript:void(0); instead of #, which can prevent unnecessary page jumps;

Therefore, the more recommended writing method is

<a href="javascript:void(0)" onclick="fn(this)"> 
<a href="javascript:void(0);" onclick="javascript:goUrl(&#39;http://www.sina.com&#39;);return false;">跳转3</a>
<a href="javascript:void(0)" onclick="subgo()">点我</a>

Here, javascript:void(0) has no actual function. It is just a dead link, and the executed function is subgo().

<a href="#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

In fact #contains a location information. The default anchor is #top, which is the top of the web page, and javascript:void(0) only represents a dead link without any information. Therefore, it is best to use void(0)

when calling a script href generally points to a URL address, you can also call javascript, such as href="javascript:xxx();", the document recommends writing like this: < ;a href=" javascript:void(0)" onclick="xxx();">xx, but this method sometimes causes strange problems in complex environments. Try not to use the javascript: protocol as The href attribute of A will not only cause the window.onbeforeunload event to be triggered unnecessarily, but will also stop the playback of animated gif images in IE.

When you click on such a link, two things will happen. 1. If dosomthing returns true, then the browser will jump to cool.html. On the contrary, if it returns false, the href will be ignored. So taking advantage of this feature, we can write code like this...

<a href="cool.html" onclick = "doSomething()">做点什么吧</a>
function doSomething(){
return confirm("您确认要离开吗");
}
function doSomething(){
var ret = confirm("确认要离开吗?");
if(ret){
window.loaction.href = "cool.html";
}
}

The above is the detailed content of Detailed explanation of the execution order of onclick and href of a tag in html. For more information, please follow other related articles on the PHP Chinese website!