Javascript 浏览器使用history.pushState向前推进两步

我目前正在用JavaScript制作一个图库。我想创建一个自定义历史记录条目，以便最终用户可以单击历史记录返回以关闭大图片覆盖

My 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, '');

问题是，我的控制台在点击图片后会触发one空。但是，当我回到历史中时，它显示了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;

---

问题是，被单击以触发导航的元素是

标记，如果单击这些元素并设置其

href

属性，则会触发导航事件

为了避免这种情况，您可以将元素从

标记更改为类似

或内联

的其他标记，但如果您的页面需要在没有鼠标的情况下导航，这可能会带来可用性问题。更可靠的解决方案是使用

event.preventDefault（）

，防止单击事件导致导航：

let itemLinks=document.getElementsByClassName（'item-link'）；
for（让项目链接中的链接）{
link.addEventListener（'click'，函数（事件）{
//防止标记触发默认导航
event.preventDefault（）；
//推动我们自己的国家导航
让state={show:true，obj:link.dataset.file}；
历史。pushState（州“”）；
});
}

---

这样，您仍然可以保留

标记的所有有益行为，而不会出现讨厌的额外导航事件。

您可以展示完整的示例吗？也许您多次绑定事件？谢谢。请看一下我的编辑。您的

项目链接是什么类型的元素？锚定标记可能会导致一个导航，然后JS会导致另一个导航？谢谢！这是一个
元素，它会带来麻烦。。。！如果愿意，您可以将它们保留为
标记（用于浏览器样式、悬停光标等），只需使用
event.preventDefault（）
函数即可。如果你愿意，我可以写一个完整的答案。
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();
}

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, '');
  });
}