preventDefault() 不适用于单击事件处理程序上的 window.location.hash答案

【问题标题】：preventDefault() does not work with window.location.hash on a click event handlerpreventDefault() 不适用于单击事件处理程序上的 window.location.hash
【发布时间】：2021-05-06 13:41:25
【问题描述】：

我正在尝试在单页应用程序中进行平滑滚动。为了做到这一点，我在 click 事件处理程序中使用 window.location.hash 语句，例如：

 $('a').on('click', function(event) {
   event.preventDefault();
   let hash = this.hash;
   if (hash !== '') { 
   window.location.hash = hash
   // _scrollTo();
   }
 })

我将窗口的 hashchange 事件绑定到上面的 _scrollTo() 函数，这样当用户尝试使用哈希获取 url 时，应用程序应该滚动到那里：

$(window)
.on("hashchange", _scrollTo)
.trigger("hashchange")

滚动功能是这样的：

  const _scrollTo = function () {
    var destination = $('body').find(window.location.hash);
    _scrollToDestination(destination, configMap.duration);
  }

我需要使用这个功能，因为页面顶部的标题是固定的，我不希望滚动到一个部分会在标题下并且用户看不到

  const _scrollToDestination = function (destination, duration) {
    let headerHeight = $('header').outerHeight(true);
    $('html, body').animate({
      scrollTop: destination.offset().top - headerHeight
    }, duration);
  }

问题是当我在点击处理程序中使用 window.location.hash 语句时，事件处理程序的行为就像没有阻止默认行为一样，我得到奇怪的结果。

Codepen

感谢任何帮助。谢谢。

【问题讨论】：

您正在阻止锚机制但手动更改哈希。这实际上触发了窗口中的另一个事件。
另外，您可能无法更改自动滚动行为。您可以使用简单的 hack：stackoverflow.com/questions/13328647/… 或更改浏览器找不到元素的目标标记（例如使用 data-id 而不是 id/name）

标签： javascript jquery event-handling dom-events

【解决方案1】：

简单地阻止 window.location 的默认行为...为我工作

How can I update window.location.hash without jumping the document?

【讨论】：