[英]Browser goes forward two steps with history.pushState
我目前正在使用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();
}
问题在于,单击以触发导航的元素是<a>
标记,如果单击它们并且设置了href
属性,则它们将触发导航事件。
为了避免这种情况,您可以将元素从<a>
标记更改为<span>
或内联<div>
,但是如果您的页面需要无需鼠标即可导航,则会带来可用性问题。 一个更可靠的解决方案是使用event.preventDefault()
来防止click事件导致导航:
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>
标签的所有有益行为,而不会产生讨厌的额外导航事件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.