Javascript 防止触发第二个事件：单击与URL哈希更改

我的一页上有标签。每个选项卡加载动态内容：

HTML

<ul>
    <li><a href="#tab-1">TAB 1</li>
    <li><a href="#tab-2">TAB 2</li>
    <li><a href="#tab-3">TAB 3</li>
</ul>

此外，我正在处理浏览器的后退按钮。每次单击按钮且URL中的选项卡哈希更改时，相应的选项卡将被激活并检索其数据：

jQuery-

onhashchange

$(window).on('hashchange', function() {
    var hash = $.trim(window.location.hash);
    var $link = $('li a[href="' + hash + '"]');

    if ($link.length) {
        $link.trigger('click'); // Pass the flow to onclick handler
    }
});

后退按钮工作正常。问题是，当单击选项卡时，两个事件（

onclick

和

onhashchange

）都会被触发，这导致Ajax调用两次

如何仅在单击选项卡时防止

onhashchange

如何仅在单击选项卡时防止onhashchange

不要

相反，让hashchange处理程序始终发送ajax请求

// Click on anchor automatically triggers hashchange
$('li a').on('click', function(e) {
    $(this).addClass('active');
});

// hashchange is triggered by both clicks and back button 
$(window).on('hashchange', function() {
   // Make ajax call to fetch content for location.hash
} );

---

对不起，我一时糊涂，写了些愚蠢的东西。这个想法似乎非常简单，谢谢：）我认为这不是正确的方法。在JS中跟踪用户的哈希值，当用户单击链接时，在位置重定向之前将哈希值附加到url，然后您可以在下一页上读取和解析新url。

// Click on anchor automatically triggers hashchange
$('li a').on('click', function(e) {
    $(this).addClass('active');
});

// hashchange is triggered by both clicks and back button 
$(window).on('hashchange', function() {
   // Make ajax call to fetch content for location.hash
} );