浏览器使用 history.pushState 前进两步答案

【问题标题】：Browser goes forward two steps with history.pushState浏览器使用 history.pushState 前进两步
【发布时间】：2018-10-09 14:45:53
【问题描述】：

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

问题是，我的控制台在 one 点击图片后触发 one 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();
}

【问题讨论】：

你能展示完整的例子吗？也许你多次绑定事件？
谢谢。请看一下我的编辑。
你的item-links 是什么类型的元素？锚标签可能会导致一个导航，然后你的 JS 会导致另一个？
谢谢！它是一个<a> 元素，麻烦了...！
如果您愿意，您可以将它们保留为<a> 标签（用于浏览器样式、悬停光标等），您只需要使用event.preventDefault() 函数。如果你愿意，我可以写一个完整的答案。

标签： javascript browser-history html5-history

【解决方案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> 标记的所有有益行为，而不会出现讨厌的额外导航事件。

【讨论】：