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

Question

已尝试使用 Below Code 但没有破坏 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 的第二个参数必须是您要删除的函数。

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

将您的事件处理程序声明为具有可重用引用的函数。然后将该参考用于 both 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);

Answer 2

为了删除监听器，您必须将监听器函数本身传递给 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);

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

How to destroy 'Popstate' event listener?

javascript

popstate

removeeventlistener