通过 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>

通过 href 属性调用 JavaScript 函数的最佳方式

Best way of calling a JavaScript function through an href attribute

javascript

onclick

href

void