href and onclick usage, difference, priority level in Html a tags

Source: Internet
Author: User

If you do not set the href property below IE6, you will not respond to hover. Double-clicking will select the label's parent container instead of the one-a label (this problem exists under IE).

The code is as follows Copy Code
<a href= "JAVASCIRPT:FN (This)" > <a onclick= "fn (this)" >

Suppose we have a FN method that needs to be taken to this element, and the first method passed in this is a null value.

Therefore, the comparison of the recommended wording is

The code is as follows Copy Code
<a href= "javascript:void (0)" onclick= "FN (this)" >


The following code executes the SUBGO () function,

The code is as follows Copy Code

<a href= "javascript:void (0)" onclick= "Subgo ()" > Dot i </a>

Here, javascript:void (0), which does not have an actual function, is just a dead link, and the function being executed is SUBGO ().

The code is as follows Copy Code

<a href= "http://blog.163.com/wb_zhaoyuwei/blog/#" onclick= "Subgo ()" > Dot i </a> <a "javascript: void (0) "onclick=" Subgo () > Point I </a> difference.

In fact #包含了一个位置信息默认的锚是 #top is the top of the page, and javascript:void (0) only represents a dead link, without any information. So the best time to invoke a script is void (0)

HREF typically points to a URL address, or it can invoke JavaScript, such as href= "javascript:xxx ()," which is recommended in the document:<

The code is as follows Copy Code
A href= "http://www.111cn.net/zhongxing/U880/javascript:void (0)" onclick= "xxx ();" >xx</a>,

But this approach can sometimes create strange problems in complex environments, and try not to use JavaScript: protocol as the HREF attribute of a, which will not only cause unnecessary triggering of window.onbeforeunload events, but will also stop the animated GIF pictures in IE.

We know that the linked onclick event is executed first, followed by an action (page jump, or JavaScript pseudo link) under the href attribute, and if you do not want to perform an action under the href attribute, the onclick needs to return false, which is generally written onclick= " xxx (); return false;.

Tabpane JS source code, because the onclick did not return false, when the Ifrmae closed tabpane will cause href execution, the page shows a problem. The workaround is to copy the following code into the JSP using tab.

Issue priority for both href and onclick in Html a tags

1 order
IE 6:href triggers the onclick first after triggering
Other browsers trigger the href after triggering the Onlick first

2 href= "javascript:xxx ()"
Cannot pass in this as a parameter
OnClick can

The code is as follows Copy Code
<a href= "Javascript:alert (' href event ');" onclick= "clickevent (this);" >

3 Precedence triggering method if return false causes the latter event not to be triggered
Like what

The code is as follows Copy Code
<a href= "Javascript:alert (' href event ');" onclick= "clickevent (this); return false; >

4
<a href= "#" > will cause the page to navigate to the bookmark location,

5
Because of the 1 and 4 reasons
At the same time, there are <a href= "#" and onclick in the IE6. The onclick event was discarded by the browser because the page was loaded first because of the href reload.


6 Summary:
1 When you do not need to pass this as the parameter of the method, recommend
Use only href= "JavaScript:"

2 If you need to use this parameter, recommend

The code is as follows Copy Code
<a href= "javascript:void (0);" onclick= "dosomthing (This)" >


As a column below.
We need a to visit the href 3rd time after the first and second clicks to access another address

The code is as follows Copy Code

var href=0

function Clicka (obj)
{
if (href==2)
{
Obj.href= "HTTP://WWW.BAIDU.COM?QC";
}else
{
href++;
}
return true;

}



<a href= "http://www.111cn.net/" Target=_blank id= "Showa" onclick= "Clicka (This)" > open-screen high-speed download </a>

The difference between using JavaScript in the href and onclick of a label


The linked onclick event is executed first, followed by the action under the HREF attribute (page jump, or JavaScript pseudo link);
Suppose the link has both href and onclick, and if you want the action under the HREF attribute to not execute, the onclick must get a false return value. No, you can comment out the return false in the Gogoogle function.
If the page has a scroll bar too long, and you want to perform the action through the linked onclick event. Its href attribute should be set to Javascript:void (0) instead of #, which prevents unnecessary page runout;
If you call a function with a return value in the href attribute of the link, the contents of the current page will be replaced by the return value of the function;
Holding down the SHIFT key makes a difference.
The problem I encountered today is not accessible to parentnode in the form of href in IE6.0.
Try not to use JavaScript: protocol as the HREF attribute of a, this will not only cause unnecessary trigger window.onbeforeunload event, in IE will make GIF animated pictures stop playing.
It took a lot of time on this.

Reason
When using the CheckBoxList control, you want to implement a link after each checkbox, point link to implement some features, but also to check the checkbox.

The code is as follows Copy Code

<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; " Links in >[label]</a></label>

Finally, it is realized with parentnode.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.