href and onclick usages, distinctions, precedence levels in Html a tags

Source: Internet
Author: User

Original: href and onclick usages, distinctions, precedence levels in Html a tags

If you do not set the href attribute under IE6, hover will not respond. When you double-click the label's parent container is selected instead of the one-a-label (the problem exists under IE).

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

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

Therefore, the more recommended wording is

The code is as follows Copy Code
<a href= "http://zxffl.blog.163.com/blog/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 ()" > Point me </a>

Here, javascript:void (0), does not have a substantial effect, it is just a dead link, the function that executes is subgo ().

The code is as follows Copy Code

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

In fact #包含了一个位置信息默认的锚是 #top is the upper end of the page, and javascript:void (0) simply represents a dead link with no information. So it's best to use void when calling scripts (0)

href refers to a URL address or JavaScript, such as href= "javascript:xxx ();", which is recommended in the documentation:<

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

However, this method can sometimes produce strange problems in complex environment, try not to use JavaScript: protocol as the HREF attribute of a, which will not only lead to unnecessary triggering of window.onbeforeunload events, but also make GIF animated pictures stop playing in IE.

We know that the onclick event of the link is executed first, followed by the action under the HREF attribute (page jump, or JavaScript pseudo-link), and if you do not want to perform the 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 does not return false, when the Ifrmae closed Tabpane will cause the href execution, the page shows a problem. The workaround is to copy the following code into the JSP using tab.

The problem priority level used by the href and onclick in the Html a tag

1 order
IE 6:href Trigger after onclick first
Other browsers trigger the href after triggering 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 Priority firing 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= "http://zxffl.blog.163.com/blog/#" > will cause the page to be anchored to the bookmark location,

5
Because of the reason of 1 and 4
At the same time there are <a href= "http://zxffl.blog.163.com/blog/#" and onclick at the time of the IE6 because the page was re-loaded by the href, causing the onclick event to be discarded by the browser.


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

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

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


As a column below.
We need a at the first and second click to access the href after the 3rd time 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 high Speed Download </a>

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


The linked onclick event is executed first, followed by the action under the HREF attribute (page jump, or JavaScript pseudo-link);
Assuming that both the href and the onclick are present in the link, the onclick must get a return value of false if the action under the HREF attribute is not executed. If you do not believe, 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 jumps;
If a function with a return value is called in the href attribute of the link, the contents of the current page will be replaced by the return value of the function;
There is a difference when you hold down the SHIFT key.
Today I encountered problems, in the IE6.0 in the form of href access to parentnode.
Try not to use JavaScript: protocol as the HREF attribute of a, which will not only lead to unnecessary triggering of the Window.onbeforeunload event, in IE will make the GIF animated pictures stop playing.
That's all, it took a lot of time on this.

Reason
When using the CheckBoxList control to implement a link after each checkbox, click the link to implement some of the functions, 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, we use parentnode to achieve.

href and onclick usages, distinctions, precedence levels in Html a tags

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.