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

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 there are both href and onclick in the link. If you want the action under the href attribute not to be executed, onclick must get a false return value;

⒊ If the page is too long and there is scrolling bar, and you want to perform an action via the link's onclick event. Its href attribute should be set to javascript:void(0); instead of #, which can prevent unnecessary page jumps;

⒋ If you call a return value in the href attribute of the link function, the content of the current page will be replaced by the return value of this function;

⒌ There will be a difference when holding down the Shift key.

⒍ ParentNode cannot be accessed 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 stop the GIF animated image from playing in IE. That's all, spent a lot of time on this.

(Under IE6)

<a href="javascript:void(0);" onclick="javascript:modifypassword();"><img src="images/blue/Modify.gif"/></a>

This way of writing the URL under IE6 requests the background, but there is no movement in the front desk.

The correct way of writing should be

<a href="javascript:void(0);" onclick="javascript:modifypassword();return false;"><img src="images/blue/Modify.gif"/></a>

A few examples from my personal collection for everyone to learn from:

1：<a href="####"></a>
2：<a href="javascript:void(0)"></a>
3：<a href="javascript:void(null)"></a>
4：<a href="#" onclick="return false"></a>
5：<span style="cursor:hand"></span>(好像在FF中不能显示)

-------------------------- -------------------------------------------------- --

Use JavaScript with caution: void(0) When I tested today, it was clear that the program had been executed and the final result was correct, but the page would not refresh.

Tested under FireFox2.0 and ie7, the result is normal, but IE6 does not refresh! After careful investigation, I found that the page link is 548da03febfc62aacbe3479d7d01cd5f Test5db79b134e9f6b82c0b36e0489ee08ed, the problem lies in this void(0 )Up!

Let us first take a look at the meaning of void(0) in JavaScript: void in JavaScript is an operator, which specifies to calculate an expression but not return a value.
void operator usage format is as follows:

1. javascript:void (e-xpression)
2. javascript:void e-xpression

e-xpression is a JavaScript standard expression to be evaluated. The parentheses outside the expression are optional, but it is a good practice to write them. We can specify hyperlinks using void operator. The expression is evaluated but nothing is loaded at the current document. The code above creates a hyperlink that does nothing when the user clicks on it. When the user clicks the link, void(0) evaluates to 0, but has no effect on JavaScript. 0408054196e655f677973fb4d7c99865Nothing will happen if you click here5db79b134e9f6b82c0b36e0489ee08edIn other words, if you want to perform some processing without refreshing the page as a whole, you can use void(0), but when you need to refresh the page, you need to be careful. In fact, we can use 3e660279bc689de838ae6a847c1bd0f3, this sentence will perform a submit operation. So under what circumstances is void(0) used more often? Without refresh, of course it is Ajax. If you look at the Ajax web page, you will generally see a lot of void(0), :), so when using void(0) ), it’s best to think about whether this page needs to be refreshed as a whole.

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