The execution order of click and href of <a> tag

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

    When two definitions exist at the same time (onclick and href), if you want to prevent the action of href, you must add return false to onclick; generally write οnclick="xxx();return false;". The function defined in
href If there is a return value, the content of the current page will be replaced by the return value. If the page is too long and has a scroll bar, 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 jumping;
therefore, the recommended way of writing is

<a href="javascript:void(0)" onclick="fn(this)"> 
<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com');return false;">跳转3</a>
<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 webpage, and javascript:void(0) just means a dead link without any information. So it is best to use void(0) when calling the script

href generally points to a URL address, and javascript can also be called, such as href="javascript:xxx();",

The documentation recommends writing this:<a href=" javascript:void(0)" onclick="xxx();">xx</a>,

    This method sometimes produces strange problems in a complex environment. Try not to use the javascript: protocol as the href attribute of the a tag. This will not only cause unnecessary triggering of the window.onbeforeunload event, but also stop the playback of gif animation pictures in IE .

Guess you like

Origin blog.csdn.net/qq_42697806/article/details/118104799