在前端开发中，我们常常需要在HTML页面中使用JavaScript来实现交互功能。当我们要为一个元素添加点击事件时，通常会在HTML标签上使用<a>标签，并将href属性设置为JavaScript代码。但是，在设置href属性的值时，有人会选择使用“#”，有人则会使用“javascript:void(0)”这样的值。那么，这两者有何不同呢？本文将深入讨论它们之间的区别以及如何正确地使用它们。
区别
#号
在HTML中，#代表着页面顶部的锚点。当我们在浏览器地址栏中输入“http://example.com/#section1”时，页面会自动滚动到id为"section1"的元素位置。
在使用<a>标签时，如果我们将href属性设置为“#”，则点击该链接时页面不会跳转到新的URL，而是会执行默认行为，即滚动到当前页面的顶部。同时，我们可以将绑定的事件放在href所对应的锚点处，使得链接被点击时可以触发JavaScript代码。
下面是一个示例代码：
<a href="#button" onclick="alert('Hello!')">Click me</a>
<button id="button">Button</button>当我们点击链接时，页面会自动滚动到按钮所在的位置并弹出一个提示框。
javascript:void(0)
javascript:void(0)是一种特殊的JavaScript语法。它会返回undefined值，并且不会刷新当前页面或者跳转到新的URL。
在使用<a>标签时，我们可以将href属性设置为javascript:void(0)，同时在onclick事件中添加相应的JavaScript代码。这样点击链接时，可以执行相应的JavaScript代码，而不会发生跳转行为。
下面是一个示例代码：
<a href="javascript:void(0)" onclick="alert('Hello!')">Click me</a>当我们点击链接时，页面不会发生跳转行为，同时会弹出一个提示框。
如何选择
尽管#号和javascript:void(0)都可以用于绑定JavaScript事件，但它们之间有些微妙的区别。在大多数情况下，推荐使用#号作为链接的href属性值，因为它更符合HTML的语义化，同时也可以使得在不支持JavaScript的浏览器上也能够正确跳转。
只有在某些特殊的情况下，才需要使用javascript:void(0)。例如，在一个表单提交按钮上，我们可能需要阻止默认的提交行为，并执行自己的JavaScript代码。此时我们可以使用javascript:void(0)，如下所示：
-- -------------------- ---- ------- ------ ------- ------------- -------------------------------------- ------- -------- -------- ------------ - -- ---------- ----------------------- -- ----------------- ----------- ------------- - ---------
总结
- #号代表页面顶部的锚点，而javascript:void(0)是一种特殊的JavaScript语法。
- 推荐在大多数情况下使用#号作为链接的href属性值，因为它更符合HTML的语义化，同时也可以使得在不支持JavaScript的浏览器上也能够正确跳转。
- 只有在某些特殊的情况下，才需要使用javascript:void(0)，例如阻止表单默认提交行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7108
