如何销毁'Popstate'事件侦听器？

Question

尝试过下面的代码，但它不会破坏Popstate Event。

请帮助我们举例说明我可以根据条件销毁Popstate Event。

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event) {
if (true){
history.pushState(null, document.title, location.href);
console.log('Back Button Prevented');
} else {
window.removeEventListener('popstate', ()=> {
console.log('Go back');
}, true);
history.back();
}
});

Answer 1

为了删除侦听器，您必须将侦听器函数本身传递给removeEventListener()。

代码中的另一个问题是，使用if (true)，您将永远无法到达删除侦听器的else块。您可能想要做的是在侦听器外部有一个布尔变量，您在侦听器的第一次调用时更改该变量。

var backButtonPrevented = false;
history.pushState(null, document.title, location.href);
function popStateListener(event) {
if (backButtonPrevented === false){
history.pushState(null, document.title, location.href);
console.log('Back Button Prevented');
backButtonPrevented = true;
} else {
window.removeEventListener('popstate', popStateListener);
history.back();
}
}
window.addEventListener('popstate', popStateListener);

Answer 2

传递给removeEventListener的第二个参数必须是要删除的函数。

您正在传递一个不同的函数，该函数尚未注册为事件处理程序，因此没有任何反应。

将事件处理程序声明为具有可重用的引用的函数。然后将该引用用于removeEventListener和addEventListener。

history.pushState(null, document.title, location.href);
function myEventListener (event) { 
if (true){
history.pushState(null, document.title, location.href);
console.log('Back Button Prevented');
} else {
window.removeEventListener('popstate', myEventListener);
history.back();
}
}
window.addEventListener('popstate', myEventListener);