防止在 href="#" 链接中滚动到顶部

Question

我正在为页面编写一个附加组件，以防止单击时

<a href="#">

滚动到顶部。

我知道

href="#!"

、

href="javascript:void(0);"

以及点击事件期间

event.preventDefault()

都是解决方案。

由于页面是动态的，我正在考虑“吸收”所有点击或使用

MutationObserver

。目前我已经实现了第一个解决方案（代码如下）。

我想知道是否有人可以帮助强调每个解决方案的优缺点以帮助我做出决定（或者是否有更好的解决方案/改进我的代码）。我关心的是每个解决方案如何随着页面变得更加动态/具有更多节点而扩展。

我觉得像我所做的那样为整个文档添加点击事件应该可以达到最佳效果？

document.body.addEventListener('click', function() {
  var hash = false
  for (const el of event.composedPath()) {
    switch (el.hash) {
      case "":
        hash = true
      case undefined:
        continue
    }
    hash = false
    break
  }
  if (hash) event.preventDefault()
})

为了提供一些上下文，这是一个 html5 游戏，在最繁忙的时候，文档中可能有 10000 多个

<a>

标签，并且可能一次添加/删除数千个标签。我不希望用户在每次点击或页面由于我的附加组件而发生更改时都经历明显的延迟。

Answer 1

Answer 2

您可以将 href 设置为#！而不是#

例如，

<a href="#!">Link</a>

点击时不会进行任何滚动。