Блог

Попробовали приведенный ниже код, но он не уничтожается 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();
  }
});
  

Чтобы удалить прослушиватель, вы должны передать саму функцию прослушивателя 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);
  

Второй аргумент, который вы передаете, 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);