通过 href 属性调用 JavaScript 函数的最佳方法 [重复]

Question

我有以下代码：

 <a href="javascript: doSomeFunction();">Click here</a>

在 Chrome 中它运行良好，但在其他浏览器中，如 Opera、Firefox 等，它什么也不做，打开一个几乎空白的页面，并显示消息 "Object object" 或类似的东西。

如果我将上面的 href 调用更改为

<a href="#" onClick="doSomeFunction();">Click here</a>

它在所有浏览器中都能正常工作，但页面会移到顶部（滚动条）。

第三种解决方案：

 <a href="javascript:void(0);" onClick="doSomeFunction();">Click here</a>

适用于所有浏览器。

不过，我还是在野外找到了这个建议：

<a href="javascript: doSomeFunction(); void(0);">Click here</a>

与上面类似，但不需要 onClick 事件。

为什么是最好的方法？为什么？

Answer 1

普遍的共识是使用 href="#" 优于 "javascript:void(0);"由于 "javascript:" 不会优雅地降级，因此应尽可能避免使用它们。

最好的解决方案是您的第二个解决方案：
<a href="#" onClick="doSomeFunction();">Click here</a>

要解决点击时滚动到顶部的问题，只需将其更改为：
<a href="#" onClick="doSomeFunction(event);">Click here</a>（添加事件参数）并执行 event.preventDefault();在你的函数中。

所以代码应该是这样的：

<a href="#" onClick="doSomeFunction(event);">Click here</a>

<script>
function doSomeFunction(event){
    // Do stuff

    event.preventDefault();
}
</script>