Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

赫伐他汀

我有以下代码

console.info('checking if url contains hash');
if (!location.hash) {
  console.warn('if-block replacing hash to empty!');
  location.href = '#';

  // Running route() to trigger Router.otherwise()
  console.info('running route() from if-block(hash doesn\'t exist)');
  route(location.hash.slice(1));
} else {
  // URL contains a hash. Running Router.when() to load template
  console.info('running route() from else-block(hash already present in url)');
  route(location.hash.slice(1));
}

// Bind hashchange-event to window-object... duh
console.info('binding hashchange event');
$(window).on('hashchange', function () {
  console.info('running route() from hashchange');
  route(location.hash.slice(1));
});

显然,事件侦听器附加在else-if块之后。我的控制台的输出验证了这一点

2015-02-13 12:51:14.281 main.js:69 checking if url contains hash
2015-02-13 12:51:14.284 main.js:71 if-block replacing hash to empty!
2015-02-13 12:51:14.290 main.js:75 running route() from if-block(hash doesn\'t exist)
2015-02-13 12:51:16.677 main.js:84 binding hashchange event
2015-02-13 12:51:16.678 main.js:86 running route() from hashchange

看起来事件侦听器以某种方式拾取了先前触发的hashchange事件。
这只有当网址发生example.com,不是example.com/#如果进入网站时URL中缺少/或,/#则会触发此现象。

编辑:我遇到的问题是hashchange事件侦听器甚至在侦听哈希更改之前就已触发。我想知道这是否正常。

另一个编辑:一个更清晰的示例显示,当我第一次运行时getEventListeners(window),没有侦听器附加到该hashchange事件。尽管如此,当我添加事件侦听器时,它会拾取先前触发的事件hashchange 控制台日志

我在这里错过什么还是发生了什么事?
有什么办法可以绕过这个?

i

让我们简化您的代码

location.hash = 'foobar';
window.onhashchange = function() {
  document.body.innerHTML = 'You should not see me. But you do :(';
};

要解决此问题,可以使用setTimeout延迟事件处理程序的添加:

location.hash = 'foobar';
setTimeout(function(){ // Delayed code
  window.onhashchange = function() {
    document.body.innerHTML = 'You should not see me. And you do not :)';
  };
}, 0);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何检查是否有附加到元素/文档的JavaScript事件侦听器/处理程序?

使用addEventListener获取附加到节点的事件侦听器

java事件,处理程序和侦听器的问题

Axon如何添加事件侦听器/拦截器以在事件到达处理程序之前对其进行拦截?

将事件侦听器附加到整个html文档的最佳方法

将事件侦听器附加到整个html文档的最佳方法

如何将拖放事件侦听器附加到React组件

如何/何时将事件侦听器附加到d3.js中?

如何使用事件委托而不是将事件侦听器分别附加到每个项目?

使用纯JavaScript,是否有简单的方法将事件侦听器附加到类?

使用纯JavaScript,是否有简单的方法将事件侦听器附加到类?

将事件侦听器附加到UWP中的MotionAnimation

将点击事件侦听器添加到电子应用程序中的元素

事件侦听器和处理程序之间的关系

为什么在注册事件侦听器并触发事件侦听器之前调用滚动事件?

将拖动事件侦听器添加到iframe

将setTimeout添加到事件侦听器

将事件侦听器添加到绘制的对象

将事件侦听器附加到FOR循环内的对象

Laravel事件处理程序和侦听器

JavaFX事件/侦听器/处理程序

尝试将事件侦听器添加到JTextField

JavaFX将事件侦听器附加到颜色为黑色的圆圈

处理大量事件侦听器?

使用 Adobe 扩展脚本将事件侦听器附加到应用程序项目中

将“this”添加到事件侦听器?

将异步侦听器附加到单击事件

将事件侦听器附加到 Microsoft.IdentityModel.Logging

Angular 指令,无法将事件侦听器附加到元素