The difference and priority between href and onclick usage in Html's a tag

This article mainly shares an article about the usage, difference, and priority of href and onclick in the Html A tag. It has a good reference value. Friends who need to know more can take a look.

If you do not set the href attribute in IE6 will not respond to hover. After double-clicking, the parent container of the label will be selected instead of the a label (this problem exists under IE).

The code is as follows

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

Suppose we have a fn method that needs to get this element. The this passed in by the first method is a null value.

So, the more recommended way to write 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>

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

The code is as follows

点我与<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:

The code is as follows

<a href="http://www.jb51.net/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>

However, this method sometimes causes strange problems in complex environments. Try not to use javascript: protocol as the href attribute of A. This will not only cause unnecessary triggering of the window The .onbeforeunload event will stop the playback of animated gif images 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). If you do not want to execute the action under the href attribute, onclick needs to return false. Generally, onclick="xxx();return false;".

JS source code of TabPane is written like this. Since onclick does not return FALSE, when TABPANE is closed in IFRMAE, it will cause href execution and page display problems. The solution is to copy the following code into the JSP using TAB.

The problem of using href and onclick at the same time in Html A tag Priority level

1 Order

ie 6: href triggers onclick first and then triggers

Other browsers trigger onlick first and then triggers href

2 href="javascript: xxx()"

This cannot be passed in as a parameter

onclick can

The code is as follows

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

3 If the method that is triggered first returns false, the latter event will not be triggered.

For example

The code is as follows

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

4

will cause The page is positioned at the bookmark position,

5

Due to reasons 1 and 4

under ie6, there is

6 Summary:

1) When there is no need to pass this as a method parameter, it is recommended to

only use href="JavaScript: "

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

the code is as follows

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

The following is an example.

We need A to access href on the first and second clicks. After the third time, access another address.

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="http://www.jb51.net/" target=_blank id="showa" onclick="clicka(this)"> 开屏高速下载 </a>

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

The onclick event of the link is executed first, followed by the action under the href attribute (page jump, or javascript pseudo Link);

Assume that both href and onclick exist in the link. If you want the action under the href attribute not to be executed, onclick must get a false return value. If you don’t believe it, you can comment out the return false in the goGoogle function;

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 jumps;

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

will be different when holding down the Shift key.

The problem I encountered today is that I cannot access 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 the window.onbeforeunload event to be triggered unnecessarily, but will also cause the gif animated image to stop playing in IE.

That’s all, I spent a lot of time on this.

[Reason]

When using the CheckBoxList control, I want to realize the function of adding a link after each checkbox. In addition to clicking the link to realize some functions, I also need to select the checkbox.

The code is as follows

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label中的链接]</a></label>

It is finally implemented using parentNode.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Explanation on the usage of HTML's a tag href attribute to specify relative paths and absolute paths

The above is the detailed content of The difference and priority between href and onclick usage in Html's a tag. For more information, please follow other related articles on the PHP Chinese website!