用来激活JavaScript功能的链接🏠 返回首页我应该为JavaScript链接使用哪个 "href "值，"#"

我应该为JavaScript链接使用哪个 "href "值，"#"还是 "javascript:void(0)"？

当你使用普通的JavaScript创建一个应用程序时，有时你会有必要在用户点击链接时触发一个函数。

你通常可以通过2种方式做到这一点。

假设你想执行的函数被称为handleClick() 。

function handleClick() {
  alert('clicked')
}

第一种方法是使用像这样的链接。

<a href="#" onclick="handleClick()">Click here</a>

第二种方法是使用

<a href="javascript:void(0)" onclick="handleClick()">Click here</a>

它们都是非常相似的语法，唯一的区别是href 属性值。

第一种是href="#" ，第二种是href="javascript:void(0)" 。你可能还会看到这种语法href="javascript:;" ，它与第二种语法是等价的。

现在，这两种方法的行为有什么不同呢？

当用户点击href="#" ，你必须确保从事件处理程序中返回false ，否则浏览器就会滚动到页面的顶部。

function handleClick() {
  alert('clicked')
  return false
}

另外，即使你添加了这个，但JavaScript被禁用或由于某种原因没有执行，浏览器也会滚动到页面顶部。这几乎是一个需要避免的事情，所以我个人会使用第二种形式，href="javascript:void(0)" 。

在这两种方式中，如果JavaScript被禁用，或者JavaScript中存在错误，那么handleClick() 函数就不会被调用，因此JavaScript的执行被停止。

为了防止这种情况，你可以在href 中使用一个真正的URL作为回退，这样浏览器就会使用GET HTTP方法将用户转移到一个特定的页面，尽管这并不总是可能或方便。

但这是一个最佳实践，最佳实践并不总是方便的，但你必须在你的应用程序的设计阶段把它们考虑进去，因为你不能只为理想的用例建立而忽略所有可能出错的事情。

如果出了问题，用户会责怪你和你的断裂链接 🙂