Question

该场景是我在浏览器中滚动它执行

$(window).scroll(function() { ...  }

但是在同一页面我有onpopstate函数，当我按下浏览器中的后退/前进按钮时，它通常执行

window.onpopstate = function(event) { ...  }

这是我在html页面上的完整脚本

<script>
    window.onpopstate = function(event) { ...  }

    $( document ).ready(function() {
        $(window).scroll(function() { ...  }
    });
</script>

问题是当我在浏览器中滚动时，它会执行$(window).scroll以及window.onpopstate两个事件。

任何人都可以帮助我，因为如何在滚动时阻止执行window.onpopstate事件。

Answer 1

$(window).scroll事件总是引发popstate事件，我们不应该通过使用事件传播来阻止这种情况，因为每次活动历史记录条目更改时都会将popstate事件调度到窗口在同一文档的两个历史条目之间。请参阅MDN

的详细信息

这里的解决方案可以是检查popstate的处理程序，例如
当event.state is not null然后你的工作跳过

window.addEventListener('popstate', function(event) {
        if (event.state) {
            -- do your job
        }
    }, false);

Answer 2

<script type="text/javascript">
    window.onpopstate = function(event) {
        alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
     }

     $(document).ready(function () {
         $(window).scroll(function () {
             alert(2);
         });
     });

     history.pushState({ page: 1 }, "title 1", "?page=1");   
     history.pushState({ page: 2 }, "title 2", "?page=2");   
     history.replaceState({ page: 3 }, "title 3", "?page=3");
     history.back(); 
     history.back();
     history.go(2);  
</script>

我也在测试，但没有这个问题。

如果您可以提供详细代码。

如何防止在使用jquery的window.scroll事件时执行window.onpopstate函数

2 个答案: