Браузер идет вперед на два шага с history.pushState - PullRequest
Новая
       46

Браузер идет вперед на два шага с history.pushState

0 голосов
/ 09 октября 2018

Я сейчас создаю галерею с JavaScript.Я хочу создать собственную запись истории, чтобы конечный пользователь мог щелкнуть историю назад, чтобы закрыть оверлей большого изображения.

Мой window.onpopstate выглядит следующим образом: 

   function stateChange(event){
    let state = event.state;
    console.log(state);
    if(state !== null){
        if(state.show){
            showOverlay(state.obj);
        }else{            
            hideOverlay();
        }
    }else{
        hideOverlay();
    }
}

ИМой eventListener для картинок: 

    let state = {show: true, obj: itemLinks[i].dataset.file};
    history.pushState(state, '');

Проблема в том, что моя консоль запускает один ноль, следующий после один клик по картинке.Но когда я возвращаюсь в историю, это показывает государственный объект.Если я вернусь в другой раз, я получу ноль, с которого я начал.

- РЕДАКТИРОВАТЬ -

Больше моего кода: 

for (let i = 0, len = itemLinks.length; i < len; i++) {
    itemLinks[i].addEventListener('click', function(){
        let state = {show: true, obj: itemLinks[i].dataset.file};
        history.pushState(state, '');
    });
}
overlay.addEventListener('click', clickOverlay)
window.onpopstate = stateChange;

И:

let itemLinks = document.getElementsByClassName('item-link');

let overlay = document.getElementById('gallery-overlay');
let overlayImg = document.getElementById('gallery-overlay-img');    

function showOverlay(src){
    overlayImg.src = src;
    overlay.classList.add('gallery-overlay__show');
}

function hideOverlay(){
    overlay.classList.remove('gallery-overlay__show');
}

function clickOverlay(){
    history.back();
}

1 Ответ

0 голосов
/ 09 октября 2018

Проблема заключалась в том, что элементы, по которым щелкали для запуска навигации, представляли собой теги <a>, которые будут вызывать событие навигации, если на них щелкнули, а их атрибут href установлен.

Чтобы этого избежать,может изменить элемент с тега <a> на что-то другое, например <span> или встроенный <div>, но это может привести к проблемам с удобством использования, если когда-либо необходимо перемещаться по вашей странице без мыши.Более надежное решение состоит в том, чтобы предотвратить событие щелчка, вызывающее навигацию, используя event.preventDefault(): 

let itemLinks = document.getElementsByClassName('item-link');

for (let link of itemLinks) {
  link.addEventListener('click', function(event){
    // Keep the <a> tag from triggering the default navigation
    event.preventDefault();

    // Push our own state navigation
    let state = {show: true, obj: link.dataset.file};
    history.pushState(state, '');
  });
}

Таким образом, вы по-прежнему сохраняете все полезное поведение тегов <a> без неприятного дополнительного события навигации.

...