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

Question

这个问题已经有答案了:

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"? (56 个回答)

已关闭 7 年前。

我有以下代码:

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