详解a标签添加onclick事件的几种方式

a标签onclick事件实现方案与最佳实践

在HTML开发中，我们经常需要在a标签内添加点击事件处理逻辑。

第一种常见写法是：a href="javascript:js_method();" rel="external nofollow"

这种写法在传递this等参数时容易出现问题。此外，使用javascript:协议作为a的href属性会引发不必要的副作用，例如触发window.onbeforeunload事件；在IE浏览器中甚至可能导致GIF动画停止播放。W3C标准并不推荐在href属性中直接执行JavaScript语句。

第二种写法为：a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这是目前许多网站采用的主流方案，也是较为周全的做法。通过onclick属性执行JS函数，而href使用void(0)，其返回值为undefined，从而确保页面不会发生跳转。这种方式避免了将JS方法直接暴露在浏览器状态栏中，比第一种方式更安全。

第三种写法是：a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

该方式与第二种类似，区别在于href执行了一条空的JS代码。

第四种写法为：a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这也是网上常见的代码形式。由于#是HTML内置的特殊字符，代表页面顶部（top），因此使用这种方式点击后，页面会滚动回到最顶端。

第五种写法为：a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

此方式在执行JS函数后通过return false阻止默认行为，页面不会发生跳转，且保持在当前页面的滚动位置。

综合上述，在a中调用js函数最适当的方法推荐使用： a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

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

a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"