javascript - 仅捕获不是由 anchor 击引起的 hashchange 事件

Question

我正在尝试使用 Javascript 来模拟 CSS :target伪类，以便捕获导致页面上的元素被定位的所有事件。我确定了 3 个触发事件:

1. window.location.hash在初始化时已经针对相同 ID 的元素
2. 点击指向该元素的 anchor
3. hashchange独立于上述事件触发事件(例如通过 window.history API)

场景 2 作为一个独特的案例很重要，因为我想调用 click事件的preventDefault .此场景的简化代码如下:

$('body').on('click', 'a[href*=#]', function filterTarget(clickEvent){
    $(this.hash).trigger('target', [clickEvent]);
});

尝试实现场景 3 时出现问题:

$(window).on('hashchange', function filterTarget(hashChangeEvent){
    $(this.hash).trigger('target', [hashChangeEvent]);
});

如果 target处理程序不会取消场景 2 的 native 行为，当 native 行为导致结果 hashchange 时，它将再次被触发。事件。如何过滤掉这些边缘情况？

解决方案后编辑:

roasted 的回答是关键——处理命名空间的 hashchange 事件，然后根据点击处理程序及其 preventDefault 内部处理的逻辑解除绑定(bind)和重新绑定(bind)处理程序。 I wrote up the full plugin here .

Answer 1

如果我理解，您不希望在单击 anchor 标记时触发 hashchange 事件。然后，您可以使用命名空间事件设置您的逻辑:

DEMO

$('body').on('click', 'a[href*=#]', function (clickEvent) {
    filterTarget(clickEvent,this);  
    $(window).off('hashchange.filter').on('hashchange.tmp', function () {
          $(this).off('hashchange.tmp').on('hashchange.filter', filterTarget);
    });
});
$(window).on('hashchange.filter', filterTarget);

function filterTarget(event,elem) {
    $(elem?elem.hash:window.location.hash).trigger('target', [event]);
    //you could filter depending event.type
    alert(event.type + '::'+ (elem?elem.hash:window.location.hash));
}