在开发现代Web应用时,我们常常需要创建只执行JavaScript代码而不进行实际导航的链接。为此,有两个常见的选择:href="#"
和 href="javascript:void(0)"
。本文将详细探讨这两种方法的优缺点,并介绍更好的替代方案。
为什么使用javascript:void(0)
?
避免潜在错误
-
防止返回值丢失:当团队中的开发者使用
href="#"
时,很容易犯一个错误,即在调用的函数末尾忘记使用return doSomething()
。这种情况下,点击链接会触发默认行为,即页面顶部的跳转。function doSomething() { // 一些代码 return false; }
-
防止错误未被捕捉:如果使用
href="#"
,而函数内部出现未捕捉的错误,那么最终的return false;
将不会执行。同样,这会导致页面滚动到顶部。 -
动态绑定事件:在某些情况下,我们需要动态地为元素绑定
onclick
事件。使用href="javascript:void(0)"
可以避免在动态绑定事件时需要特别处理返回值。<a href="javascript:void(0)" onclick="someFunc.call