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 =＆＃34;＃＆＃34;优于＆＃34; javascript：void（0）;＆＃34; as＆＃34; javascript：＆＃34;不会优雅地降级，所以应该尽可能避免它们。

最好的解决方案是你的第二个解决方案：
<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函数的最佳方法

1 个答案: