Detailed explanation of the usage differences between a tag href and onclick in HTML and examples of priority levels

I used to write the href and onclick of very casually. Later, several problems occurred, and then I started to pay attention to this issue:

First excerpt from a document:

In Javascript, void is an operator, which specifies to calculate an expression but not return a value.

void operator usage format is as follows:

1. javascript:void (expression) 
2. javascript:void expression

expression is a Javascript standard expression to be evaluated. The parentheses outside the expression are optional, but are a good practice to write. (Implementation version Navigator 3.0)

You can use the void operator to specify a hyperlink. The expression will be evaluated but nothing will be loaded into the current document.

The following code creates a hyperlink that will cause nothing to happen to the user later. When the user links, void(0) evaluates to 0, but has no effect on the Javascript.

<A HREF="javascript:void(0)">单此处什么也不会发生</A>

The following code creates a hyperlink that will submit the form when the user clicks.

<A HREF="javascript:void(document.form.submit())">

Submit form here

The following code executes the subgo() function,

<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().

点我与<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();", document It is recommended to write like this: xx, but this method sometimes causes strange problems in complex environments, so try not to Using javascript: protocol as the href attribute of A will not only cause the window.onbeforeunload event to be triggered unnecessarily, but will also cause the animated gif image to 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). If you do not want to execute the action under the href attribute Action execution, onclick needs to return false, generally write onclick="xxx();return false;".

JS source code of TabPane, because 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.

TabPane.prototype.appendTitle = function(tabpage){
  var td = $create("td");
  var strHTML = "<table class="" + TAB_STYLE_TABLE  + "" border="0" cellspacing="0" cellpadding="0"><tr>";
  strHTML +="<td><p class=""+TAB_STYLE_LEFT+""></p></td>";
  strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
  strHTML +="<p style="white-space:nowrap;page-break-before: always;page-break-after: always;">";
  strHTML += tabpage.getTitle();
  strHTML +="</p></td>";
  if(tabpage.showCloseButton){
   strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
   strHTML +="<a class="close" href="#" onclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").close();
return false;
">";
   if(isIE){
    strHTML +="<p></p></a>";
   }else{
    strHTML +="<p class="close"></p></a>";
   }
   strHTML +="</td>";
  }
  if(tabpage.allowReload){
   strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
   strHTML +="<a class="reload" href="#" onclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").reload();
return false;
">";
   if(isIE){
    strHTML +="<p></p></a>";
   }else{
    strHTML +="<p class="reload"></p></a>";
   }
   strHTML +="</td>";
  }
  strHTML +="<td><p class=""+TAB_STYLE_RIGHT+""></p></p>";
  strHTML +="</td></tr></table>";
  td.className = TAB_STYLE_NOMAL + this.styleSuffix;
  td.innerHTML = strHTML;
  tabpage.__titleTD = td;
  tabpage.setTitleTD();
  tabpage.initStatus();
  this.__titleTR.insertBefore(td,this._titleTD);
  tabpage.titleWidth = td.offsetWidth;
}

href='javascript:function()'> This is written so that the link does not link to a new page and instead executes a piece of js code. It can have the same effect as onclick. Generally speaking, if you want to call a script, you should still write the code in the onclick event. It is not recommended to href=' javascript:function()' This way of writing, because after the js code is set in the href attribute, other unnecessary events may be triggered in some browsers. causing unintended effects.and The onclick event will be executed before the href attribute, so it will be triggered first. onclick then triggers href, so if you don’t want the page to jump, you can set The js code in onclick returns false at the end, so that the things inside href will not be executed. In the ajax application, write more like the following , to indicate that this link will not jump, but will execute a js script.href="javascript:void(0);" onclick="function()">或者 href="javascript:;" onclick="function()">void(0) 只是用来计算一个空值，其实也是什么事情都不做，而分号“;”则表示是一个空的js语句，这样就不会有任何其他跳转发生了，而且W3C标准不推荐在href里面执行javascript语句，所以还是用 onclick事件触发吧

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签（IE下都存在这一问题）。

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

所以，比较推荐的写法是假定我们有个fn方法，需要取到这个元素，第一个方法传入的this是空值。

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

下面代码则执行了subgo()函数，

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

在这里，javascript:void(0),没启实质上的作用，它仅仅是一个死链接，执行的函数是subgo()。

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

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ，而javascript:void(0) 仅仅表示一个死链接，没有任何信息。所以调用脚本的时候最好用void(0)

    href一般是指向一个URL地址，也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写：

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

但是这种方法在复杂环境有时会产生奇怪的问题，尽量不要用javascript:协议做为A的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

    我们知道链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接），如果不想执行href 属性下的动作执行，onclick 需要要返回 false ，一般是这样写onclick="xxx();return false;".

TabPane的JS源码，由于onclick没有返回FALSE，当IFRMAE中关闭TABPANE时会导致href执行，页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。

Html A标签中 href 和 onclick 同时使用的问题 优先级别

1 顺序 
ie 6 : href 先触发 onclick 后触发 
其他浏览器 先触发onlick 后触发 href

2 href="javascript: xxx()" 
不能传入this作为参数 
onclick可以

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

3 优先触发的方法如果返回 false 导致后一个事件不被触发 

比如

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

4 

会导致页面定位到书签位置，

5 
由于 1和 4 的原因 
在ie6 下 同时有

6 总结： 
1) 在不需要传递this作为方法的参数时候，推荐 
只使用href="JavaScript: "

2) 如果需要使用this参数，推荐

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

如下面一个列子。 

我们需要A在第一次和第二次点击的时候 访问 href 第3次以后的就访问另一个地址

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)">  开屏高速下载 </a>

在a标签的href与onclick中使用javascript的区别 

链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）； 
假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。不信，你可以将 goGoogle 函数中的 return false 注释掉； 
如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动； 
如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替； 
在按住Shift键的情况下会有所区别。
今天我遇到的问题，在IE6.0里以href的形式访问不到parentNode。
尽量不要用javascript:协议做为A的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。
就这些，花了不少时间在这上面。

[缘由]
用CheckBoxList控件时想实现在每个checkbox后再加链接的功能，点链接实现一些功能之外，还要把checkbox选中。

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

最后用parentNode来实现的
。

The above is the detailed content of Detailed explanation of the usage differences between a tag href and onclick in HTML and examples of priority levels. For more information, please follow other related articles on the PHP Chinese website!