javascript - 浏览器通过history.pushState前进两步

Question

我目前正在使用 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();
    }
}

还有我的图片事件监听器:

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

问题是，在点击图片一次后，我的控制台会触发一次 null。但是，当我返回历史记录时，它显示了状态对象。如果我再返回一次，我会得到 null，也就是我开始的地方。

-- 编辑--

更多我的代码:

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();
}

Answer 1

问题是单击触发导航的元素是 <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> 的所有有益行为标签没有烦人的额外导航事件。