请解释下href="javascript:void(0)"和href="#"的区别是什么？

在前端开发中，href="javascript:void(0)" 和 href="#" 都是常见的用于阻止链接默认行为的技巧，但它们之间有一些重要的区别。

1. 功能:

   • href="javascript:void(0)": 这个语句会执行 JavaScript 函数 void(0)，该函数返回 undefined，从而阻止链接的默认行为（即跳转到新页面或重新加载当前页面）。这通常用于当点击链接时执行某些 JavaScript 代码，而不是进行页面跳转。
   • href="#": 这个语句将链接的 href 属性设置为一个锚点（#），通常用于页面内的导航。当点击这样的链接时，浏览器会尝试跳转到当前页面的顶部（如果没有指定具体的锚点）。然而，这种行为可以通过 JavaScript 来阻止，使链接仅触发 JavaScript 事件而不进行页面跳转。

2. SEO（搜索引擎优化）和可访问性:

   • 使用 href="javascript:void(0)" 可能会对网站的 SEO 和可访问性产生负面影响，因为搜索引擎通常无法解析和执行 JavaScript 代码。这意味着搜索引擎可能无法正确地理解或跟踪使用这种方式的链接。
   • 相比之下，href="#" 在语义上更接近于一个真实的链接，尽管它的默认行为可能被 JavaScript 阻止。这种方式在 SEO 和可访问性方面通常更为友好。

3. 回退/兼容性:

   • 如果用户的浏览器禁用了 JavaScript 或遇到 JavaScript 错误，href="javascript:void(0)" 将不会执行任何操作，这可能导致用户体验不佳或功能失效。
   • 对于 href="#"，即使 JavaScript 被禁用或出错，链接仍然会尝试跳转到页面顶部（或指定的锚点），这为用户提供了一个回退机制。

4. 页面滚动位置:

   • 当使用 href="#" 时，如果页面中存在与锚点对应的元素（例如 <div id="section1"></div> 和链接 href="#section1"），浏览器会自动滚动到该元素的位置。这可以用于创建页面内的导航。然而，如果仅使用 href="#" 而没有指定具体的锚点，浏览器会滚动到页面顶部。
   • href="javascript:void(0)" 不会改变页面的滚动位置。

综上所述，虽然 href="javascript:void(0)" 和 href="#" 都可以用于阻止链接的默认行为并执行 JavaScript 代码，但它们在功能、SEO/可访问性、回退/兼容性和页面滚动位置方面有所不同。在现代前端开发中，为了遵循最佳实践和提高用户体验，通常推荐使用更语义化的方式（如按钮或其他交互元素）来触发 JavaScript 事件，而不是滥用链接元素。