如何销毁“ 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);