防止在 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

您可以使用Element.closest()从单击的元素向上遍历 DOM，并使用href属性中的特定值定位链接。

如果结果不是null则使用 Event.preventDefault Event.preventDefault()取消锚滚动

document.addEventListener('click', event => {
  const link = event.target.closest('a[href="#"]');

  if (link === null) {
    return;
  }

  event.preventDefault();
});