Explain the usage difference and priority of href and onclick in Html a tag in detail

If you do not set the href property, it will not respond to hover under IE6. Double-clicking will select the parent container of the tag instead of the 1a tag (this 1 problem exists under IE).

The code is as follows

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">

Suppose we have an fn method that needs to fetch this element, and the this passed in by the first method is null.

Therefore, the recommended writing is

The code is as follows

<a href="javascript:void(0)" onclick="fn(this)">

The following code executes the subgo () function,

The code is as follows

<a href="javascript:void(0)" onclick="subgo()">点我</a>

In this case, javascript: void (0) does not really work, it is just a dead link, and the function executed is subgo ().

The code is as follows

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()"> Order me </a> And <a href="javascript:void(0)" onclick="subgo()"> Order me </a> Difference. 

The default anchor is # top, which is at the top of the page, whereas javascript: void (0) simply represents a dead link with no information. Therefore, it is best to use void (0) when calling scripts

href1 refers to an URL address, or you can call javascript, such as href= "javascript: xxx (); ", which is recommended in the document:

The code is as follows

<a href="https://www.ofstack.com/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>

However, this method sometimes produces strange problems in complex environments. Try not to use javascript: protocol as href attribute of A, which will not only lead to unnecessary triggering of window. onbeforeunload events, but also stop playing gif animation pictures in IE.

We know that the linked onclick event is executed first, followed by the action under href attribute (page jump, or javascript pseudo-link). If you don't want to execute the action under href attribute, onclick needs to return false. Generally, onclick= "xxx (); return false; ".

JS source code of TabPane, because onclick does not return FALSE, when TABPANE is closed in IFRMAE, href will be executed, and there is a problem with the page display. The solution is to copy the following code into JSP using TAB.

Issue Priority for href and onclick in Html A Tag

1 sequence

ie 6: href triggers onclick first and then triggers

Other browsers trigger onlick first and then href

2 href="javascript: xxx()"

You cannot pass this as a parameter

onclick can

The code is as follows

<a href="javascript:alert('href event');" onclick="clickevent(this);">

3 Priority triggering method If false is returned, the last 1 event will not be triggered

For example

The code is as follows

<a href="javascript:alert('href event');" onclick="clickevent(this); return false;">

4

< a href="#" > Causes the page to navigate to the bookmark location,

5

For reasons 1 and 4

Under ie6, there are both < a href = "#" and onclick, because the page was reloaded once because of href, the onclick event was discarded by the browser.

6 Summary:

1) When you do not need to pass this as a parameter to the method, it is recommended that

Use only href = "JavaScript:"

2) If you need to use the this parameter, it is recommended

The code is as follows

<a href="javascript:void(0);" onclick="doSomthing(this)" > 

As in the following column.

We need A to access href on the first and second clicks, and then access another address after the third click

The code is as follows

var href=0
function clicka(obj)
{
 if (href==2)
 {
 obj.href="http://www.baidu.com?qc";
 }else
 {
 href++;
 }
 return true;
}
 <a href="https://www.ofstack.com/" target=_blank id="showa" onclick="clicka(this)">  Open screen high-speed download  </a> 

Difference between javascript in href and onclick of a tag

The linked onclick event is executed first, followed by the action under the href property (page jump, or javascript pseudo-link);

Assuming that both href and onclick exist in the link, onclick must get a return value of false if the action under the href property is not executed. If you don't believe me, you can comment out return false in goGoogle function;

If the page is too long and has a scroll bar, and you want to perform the action through the linked onclick event. Its href property should be set to javascript: void (0); Instead of #, this can prevent unnecessary page jumping;

If a function with a return value is called in the linked href attribute, the content of the current page will be replaced by the return value of this function;

The difference will be made when the Shift key is pressed and held down.

The problem I encountered today is that parentNode cannot be accessed as href in IE 6.0.

Try not to use javascript: protocol as the href attribute of A, which will not only cause unnecessary triggering of window. onbeforeunload events, but also stop playing gif animation pictures in IE.

That's it. I spent a lot of time on it.

[Reason]

When using CheckBoxList control, we want to realize the function of adding links after each checkbox, and click links to realize some functions, but also select checkbox.

The code is as follows

<input type="checkbox" name="chk" id="chk">
<label for="chk"> Select it <a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label Links in ]</a></label>

Finally, it is realized by parentNode.