HTML A标签href与onclick的执行顺序、优先级及最佳实践详解

IE6兼容性与基础行为分析

若未设置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="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

实际上，#符号包含位置信息，默认锚点指向#top即网页顶端；而javascript:void(0)仅表示一个无实际跳转信息的死链接。因此，在调用脚本时，建议使用void(0)以避免页面跳动。

href通常指向URL地址，也可调用JavaScript，例如href="javascript:xxx();"。文档中推荐的标准写法如下：

代码示例如下：

<a href="https://www.jb51.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，当在IFRAME中关闭TABPANE时会导致href执行，进而引发页面显示异常。解决办法是将以下代码复制到使用TAB的JSP文件中。

href与onclick的执行顺序与优先级

关于HTML A标签中href与onclick同时使用的问题，其优先级机制如下：

1. 执行顺序差异

在IE6浏览器中，触发顺序为：先执行href，后执行onclick。

在其他现代浏览器中，触发顺序为：先执行onclick，后执行href。

2. href="javascript: xxx()"的局限性

此种写法无法将this作为参数传入。

而onclick事件可以正常传递this参数。

代码示例如下：

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

3. 若优先触发的方法返回false，将导致后续事件不被触发。

例如以下场景：

代码示例如下：

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

JavaScript在href中的使用区别

在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联动

[缘由]

在使用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方法实现了该功能。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！