a标签调用JavaScript方法的五种方式及最佳实践

a标签触发JavaScript函数的常见实现方式汇总

a标签触发JavaScript函数的常见实现方式汇总

a标签href属性的定义与作用

<a> 标签的 href 属性用于定义超链接的目标 URL。该属性的值可以是相对或绝对的 URL，指向任意有效文档，也可以包含片段标识符或 JavaScript 代码段。

使用javascript:伪协议的优缺点

在 href 属性中使用 javascript:; 配合 rel="external nofollow"，其中 javascript: 是一种伪协议，允许通过链接直接调用 JavaScript 函数。采用这种方式

javascript:; 可以确保在点击 A 标签执行事件时，即使页面存在滚动条且内容较多，页面也不会发生位置跳变，从而提升用户体验。

第一种写法：直接执行JavaScript语句

1. <a href="javascript:js_method();" rel="external nofollow" rel="external nofollow">

这是平台上常见的一种写法，但存在隐患：传递 this 等参数时容易出错；此外，将 javascript: 协议作为 href 值会不必要地触发 window.onbeforeunload 事件，且在 IE 浏览器中可能导致 GIF 动画停止播放。W3C 标准不推荐在 href 中直接执行代码。

JavaScript 语句

第二种写法：void(0)配合onclick

2. <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()">

这是目前网站最常用的方案，也是最为周全的做法。onclick 事件负责执行具体的 JavaScript 函数，而 void 是一个操作符，void(0) 返回 undefined，确保地址不发生跳转。此外，这种方式不会像第一种方法那样将 JavaScript 代码直接暴露在浏览器状态栏中。

第三种写法：空字符串配合onclick

3. <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()">

这种方法与第二种类似，区别在于它执行了一条空的 JavaScript 代码。

第四种写法：#号配合onclick

4. <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()">

这也是网上常见的代码。# 是标签内置的标识，代表页面顶部（top）。因此，使用这种方法点击后，网页会滚动回到页面的最顶端。

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"></a> 如果页面存在滚动条，点击后网页会返回到页面的最顶端。

第五种写法：#号配合return false

5. <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;">

这种方法在点击执行 JavaScript 函数后执行 return false，从而阻止页面跳转，执行后页面保持在当前位置。

主流网站实践对比

观察淘宝主页发现，其采用的是第二种方法；而阿里巴巴主页采用的是第一种方法，区别在于每个 href 中的 JavaScript 方法都被 try...catch 语句包裹。

推荐的最佳实践方案

综合上述分析，在 a 标签中调用 JavaScript 函数最适当的方法推荐使用：

• <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()">
• <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()">
• <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"> 我们常用的在 a 标签中嵌入点击事件：
• <a href="javascript:js_method();" rel="external nofollow">

总结

以上就是关于 a 标签调用 JavaScript 的全部知识点内容，感谢大家对本站的支持。