防止在 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() 取消锚点滚动

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

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

  event.preventDefault();
});