为什么hashchange事件侦听器中的输出是重复的？
hashchange事件是在URL的片段标识符（即#后面的部分）发生变化时触发的事件。当我们在浏览器中改变URL的片段标识符时，hashchange事件会被触发，并执行相应的事件处理函数。
在hashchange事件的事件处理函数中，如果我们输出了事件对象或者事件相关的属性，可能会发现输出是重复的。这是因为hashchange事件在某些浏览器中存在一个特殊的行为，即在事件处理函数中修改URL的片段标识符时，会再次触发hashchange事件，从而导致输出的重复。
这种行为是由于浏览器在处理hashchange事件时的机制决定的。当我们在事件处理函数中修改URL的片段标识符时，浏览器会认为URL发生了变化，因此会再次触发hashchange事件。这样就形成了一个循环，导致输出的重复。
为了避免输出的重复，我们可以在事件处理函数中添加一个判断条件，判断当前是否已经执行过相应的逻辑，如果已经执行过，则不再重复执行。可以使用一个标志变量或者其他方式来记录状态，以实现这个判断条件。
需要注意的是，不同浏览器对于hashchange事件的处理机制可能存在差异，因此在编写跨浏览器兼容的代码时，需要考虑到这些差异性。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我已经用#2019-01 #2019-02等哈希生成了一年中的月份。每次我点击一个链接，它都会附加另一个月份列表。 它应该只显示月份链接的一个副本，但输出更新后的散列。因此，如果我点击二月，它应该输出#2019-02。date.getFullYear();p.innerHTML = location.hash;
window.addEventListener('hashch
浏览 16提问于2019-01-17得票数 0
() { route(location.hash.slice(1));显然，事件侦听器是附加在event看起来，事件侦听器以某种方式接收了以前触发的哈希更改事件编辑:
浏览 0提问于2015-02-13得票数 0
回答已采纳
window.addEventListener("hashchange",myFunction);}编辑--我确实使用的是'hashchange‘而不是'onhashchange’-
浏览 3提问于2016-11-10得票数 3
回答已采纳
随机编码问题，见下文，window.addEventListener('hashchange', () => {})
window.addEventListener('hashchange', this.hashHandler)
this.flickity.viewFullscree
浏览 4提问于2019-09-08得票数 0
class Router { window.onhashchange = this.hashChange; return true;}
我正在尝试找到一种在node.js中测试上述代码的方法如何使用mocha/jest模拟对象和测试事件侦
浏览 3提问于2019-03-28得票数 2
_myClickListener(e));若要强制添加事件侦听器，请执行以下操作。_boundListener);从表面上看，这是有意义的；我们需要确保为remove和add事件侦听器传递相同的函数引用，因为这是它对不同侦听器进行索引的方式。然而，为什么我们必须使用.bind(这个)呢？我知道它返回一个新函数，它将函数绑定到"this“，所以对保存的函数进行新的引用是有用<em
浏览 3提问于2017-08-14得票数 0
回答已采纳
关于这个代码片段，我想问您一个问题： alert('hello');上面的脚本应该这样做：
这就是问题所在:为什么hashchange在第一次执行时被调用？我怎样才能修复它，使它像描述的那样工作呢？
浏览 2提问于2015-10-12得票数 7
我正尝试在ReactJS中为我的页面添加一个事件侦听器。我已经将它添加到componentDidMount()中。但是只有在初始页面加载时才会触发。 $(window).
浏览 29提问于2017-01-21得票数 2
回答已采纳
Angular的位置服务有一个方法onUrlChange，可以注册popstate或hashchange没有的url事件，我需要它作为我项目的一部分。catch updates performed by the Angular } 与往常不同的</
浏览 43提问于2020-01-23得票数 2
回答已采纳
2回答
我写了一个简短的内容脚本，它阻止一个特定的站点创建新的链接点击窗口。 $(this).removeAttr("onclick");});onclick="window.op
浏览 1提问于2014-07-13得票数 2
回答已采纳
我正在开发一个小型的个人网站，对于导航的一个主要部分，我想使用位置散列。我在一个包含在iframe中的页面上有一个链接，我希望能够更改父页面的位置散列，但是我似乎无法让它以我想要的方式工作。更确切地说，如果我只想更改位置哈希，我可以让它工作，但我也希望在父窗口上运行一个脚本来检查已更改后的散列。以下是我所做的仅更改哈希的工作：这就是我尝试过的，让
浏览 4提问于2021-03-12得票数 0
它看起来像是异步的。是否可以通过Chrome检查器来调试谁更改了哈希？谢谢
浏览 9提问于2018-03-01得票数 1
回答已采纳
我正在使用Bootstrap框架通过整个网站的响应式设计能力。我还使用AJAX调用在每个页面之间切换。在一个页面上，我使用Bootstrap选项卡在页面内容之间切换。我最初认为它可能与我正在使用的javascript有关，以便您可以将用户定向到某个带有标签的标签，但当我删除代码时，它仍然不起作用。代码如下：
<div class="tabbable"> <!
浏览 0提问于2013-05-21得票数 0
1回答
当加载包含已包含散列的URL 的页面时，这将不起作用。(例如:mysite.com/post/#popular)，我猜可能是因为本地hashchange事件在添加自定义hashchange事件侦听器之前被发送到回调队列中。
这个问题有什么解决办法吗？
浏览 4提问于2022-02-22得票数 0
下面是关于如何正确使用preventDefault()代码的一些建议。简而言之，我不希望a.dropdownTrigger单击事件跳到锚点。我以为插入event.preventDefault()作为该函数的第一行就可以了，但显然不行。我认为这可能与绑定了hashchange事件有关，我用它来监控对url的更改(单击a.dropdownTrigger元素更新哈希位置，这将在hashchange上调用侦听器-这样做可以捕获指向dropdo
浏览 0提问于2012-10-18得票数 0
3回答
我试图使用Javascript来模拟CSS :target伪类，以便捕获导致页面上的元素成为目标的所有事件。我已经确定了三个触发事件：
场景2作为一个独特的案例非常重要，因为我想调用click事件
浏览 0提问于2013-07-03得票数 4
回答已采纳
如何检测从localhost/foo到localhost/baa事件的更改，位置更改和pushstate侦听器不起作用？ 路径正由路由库在内部更改。// update doesn't get called window.addEventListener('pushstate', update);
window.addE
浏览 14提问于2019-12-17得票数 0
选项卡式菜单及其内容的我的html： // Displays the first tab when $(this).find(".tab").这意味着菜单打开时，默认情况下第一个<div>是可见的，当用户单击另一个选项卡时，相应的&l
浏览 1提问于2013-02-18得票数 0
回答已采纳
我有一个3步注册过程中，每个步骤都显示在页面上使用javascript没有页面刷新。我现在正在尝试做的是添加一个返回引用到用户所在的步骤，这样如果他们单击浏览器的后退按钮，他们就不会丢失所有的进度。然后，用户单击浏览器的后退按钮。URL现在应该是www.example.com?step-2。step-2')，那么当前的URL也会被改变。 如何在不更改当前URL的情况下完成添加到历史记录？
浏览 16提问于2021-01-29得票数 0
如果你点击这个链接，你会在你的url中看到div的id。这怎么可能隐藏起来呢？ 50px; background-color: red;
<div id="one"></div> 将非常感谢您的帮助
浏览 56提问于2020-11-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
