HtmlA标签中href和onclick⽤法、区别、优先级别
我以前在写<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 HREF="javascript:void(document.form.submit())">
单此处提交表单</A>
下⾯代码则执⾏了subgo()函数，
<a href="javascript:void(0)" οnclick="subgo()">点我</a>
在这⾥，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属性，这样不仅会导致不必要的触发beforeunload事件，在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 >";
strHTML += Title();
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;
}
<a href='javascript:function()'> 这样写是为了让这个链接不要链接到新页⾯转⽽执⾏⼀段js代码。和onclick能起到同样的效果，⼀般来说，如果要调⽤脚本还是在onclick事件⾥⾯写代码，⽽不推荐在href='javascript:function()' 这样的写法，因为 href 属性⾥⾯设置了js代码后，在某些浏览器下可能会引发其他不必要的事件。造成⾮预期效果。⽽且 onclick事件会⽐ href属性先执⾏，所以会先触发 onclick 然后触发href，所以如果不想页⾯跳转，可以设置 onclick⾥⾯的js代码执⾏到最后返回⼀个false，这样 href ⾥⾯的东西就不会执⾏了。在ajax应⽤程序中，多写着下⾯的这样，以表⽰这个链接不跳转，⽽执⾏⼀段js脚本。<a href="javascript:void(0);" οnclick="function()"></a>或者 <a href="javascript:;" οnclick="function()"></a>void(0) 只是⽤来计算⼀个空值，其实也是什么事情都不做，⽽分号“;”则表⽰是⼀个空的js语句，这样就不会有任何其他跳转发⽣了，⽽且W3C标准不推荐
在href⾥⾯执⾏javascript语句，所以还是⽤ onclick事件触发吧
如果不设置 href属性在IE6下⾯会不响应hover。双击后会选中标签的⽗容器⽽⾮这个⼀a标签（IE下都存在这⼀问题）。
代码如下复制代码
<a href="javascirpt:fn(this)"> <a οnclick="fn(this)">
假定我们有个fn⽅法，需要取到这个元素，第⼀个⽅法传⼊的this是空值。
所以，⽐较推荐的写法是
代码如下复制代码
<a href=":void(0)" οnclick="fn(this)">
下⾯代码则执⾏了subgo()函数，
代码如下复制代码
<a href="javascript:void(0)" οnclick="subgo()">点我</a>
在这⾥，javascript:void(0)，没启实质上的作⽤，它仅仅是⼀个死链接，执⾏的函数是subgo()。
代码如下复制代码
<a href="blog.163/wb_zhaoyuwei/blog/#" ο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="www.111cn/zhongxing/U880/ javascript:void(0)" οnclick="xxx();">xx</a>,
但是这种⽅法在复杂环境有时会产⽣奇怪的问题，尽量不要⽤javascript：协议做为A的href属性，这样不仅会导致不必要的触发
我们知道链接的 onclick 事件被先执⾏，其次是 href 属性下的动作（页⾯跳转，或 javascript 伪链接），如果不想执⾏href 属性下的动作执⾏，onclick 需要要返回 false ，⼀般是这样写οnclick="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('href event');" οnclick="clickevent(this);">
3 优先触发的⽅法如果返回 false 导致后⼀个事件不被触发
⽐如
代码如下复制代码<a href="javascript:alert('href event');" οnclick="clickevent(this); return false;">
4
<a href="#"> 会导致页⾯定位到书签位置，
5
由于 1和 4 的原因
在ie6 下 同时有 <a href="#" 和 onclick的时候 由于页⾯先因为href重新载⼊了⼀次，导致 onclick事件被浏览器丢弃。
6 总结：
1) 在不需要传递this作为⽅法的参数时候，推荐
只使⽤href="JavaScript: "
2) 如果需要使⽤this参数，推荐
代码如下复制代码<a href="javascript:void(0);" οnclick="doSomthing(this)" >
如下⾯⼀个列⼦。
我们需要A在第⼀次和第⼆次点击的时候 访问 href 第3次以后的就访问另⼀个地址
代码如下复制代码var href=0
function clicka(obj)
{
if (href==2)
{
obj.href="www.baidu?qc";
}else
{
href++;
}
return true;
}
<a href="www.111cn/" target=_blank id="showa" οnclick="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。
href标签怎么用
尽量不要⽤javascript：协议做为A的href属性，这样不仅会导致不必要的触发beforeunload事件，在IE⾥⾯更会使gif动画图⽚停⽌播放。
就这些，花了不少时间在这上⾯。
[缘由]
⽤CheckBoxList控件时想实现在每个后再加链接的功能，点链接实现⼀些功能之外，还要把checkbox选中。
代码如下复制代码
<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a οnclick="this.parentNode.click();" href="luwenxiang1990.blog.163/blog/#"
>[label中的链接]</a></label>
最后⽤parentNode来实现的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。