900字范文 > Html A标签中 href 和 onclick用法区别优先级别

Html A标签中 href 和 onclick用法区别优先级别

时间：2022-03-08 09:46:43

/blog21307_27051.htm

我以前在写<A>的href和onclick一直很随意，后来出过几次问题，以后才开始重视这个问题：

首先摘录一篇文档：

在Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下：

1. javascript:void (expression)

2. javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的，但是写上去是一个好习惯。 (实现版本 Navigator 3.0)

你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。

下面的代码创建了一个超级链接，当用户以后不会发生任何事。当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

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

下面的代码创建了一个超级链接，用户单时会提交表单。

单此处提交表单</A>

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

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

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

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

href一般是指向一个URL地址，也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写：<a href=" javascript:void(0)" οnclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题，尽量不要用javascript:协议做为A的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

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

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

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><div class=""+TAB_STYLE_LEFT+""></div></td>";

strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";

strHTML +="<div style="white-space:nowrap;page-break-before: always;page-break-after: always;">";

strHTML += tabpage.getTitle();

strHTML +="</div></td>";

if(tabpage.showCloseButton){

strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";

strHTML +="<a class="close" href="#" οnclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").close();return false;">";

if(isIE){

strHTML +="<div></div></a>";

}else{

strHTML +="<div class="close"></div></a>";

}

strHTML +="</td>";

}

if(tabpage.allowReload){

strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";

strHTML +="<a class="reload" href="#" οnclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").reload();return false;">";

if(isIE){

strHTML +="<div></div></a>";

}else{

strHTML +="<div class="reload"></div></a>";

}

strHTML +="</td>";

}

strHTML +="<td><div class=""+TAB_STYLE_RIGHT+""></div></div>";

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;

}

<ahref='javascript:function()'> 这样写是为了让这个链接不要链接到新页面转而执行一段js代码。和onclick能起到同样的效果，一般来说，如果要调用脚本还是在onclick事件里面写代码，而不推荐在href='javascript:function()' 这样的写法，因为href属性里面设置了js代码后，在某些浏览器下可能会引发其他不必要的事件。造成非预期效果。而且 onclick事件会比href属性先执行，所以会先触发 onclick 然后触发href，所以如果不想页面跳转，可以设置 onclick里面的js代码执行到最后返回一个false，这样href里面的东西就不会执行了。在ajax应用程序中，多写着下面的这样，以表示这个链接不跳转，而执行一段js脚本。<ahref="javascript:void(0);" οnclick="function()"></a>或者 <ahref="javascript:;" οnclick="function()"></a>void(0) 只是用来计算一个空值，其实也是什么事情都不做，而分号“;”则表示是一个空的js语句，这样就不会有任何其他跳转发生了，而且W3C标准不推荐在href里面执行javascript语句，所以还是用 onclick事件触发吧

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

假定我们有个fn方法，需要取到这个元素，第一个方法传入的this是空值。

所以，比较推荐的写法是

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

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

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

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

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

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

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

1 顺序

ie 6 : href 先触发 onclick 后触发