javascript - 浏览器使用 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();
}
}
还有我的图片事件监听器:
let state = {show: true, obj: itemLinks[i].dataset.file};
history.pushState(state, '');
问题是,我的控制台在单击图片后会触发一个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();
}
解决方案
问题是被点击触发导航的元素是标签,如果它们被点击并且它们的属性被设置<a>
,它将触发一个导航事件。href
为避免这种情况,您可以将元素从<a>
标记更改为其他内容,例如<span>
inline <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>
标签的所有有益行为,而不会出现讨厌的额外导航事件。
推荐阅读
- webview - 在 xamarin.forms 中刷新 web 视图的最佳方法是什么
- nginx - 列出 Nginx 中的所有重定向
- node.js - 对于 Datastax NodeJS Cassandra Driver 3.5,默认的 ReconnectionPolicy 是什么?
- php - 使用 php 对这个 json 数据进行分页
- types - 依赖对类型
- html - 媒体查询的内容未按预期居中
- python - Python " 是 " 。a=1 >> a is int >>False 。这是怎么回事?它不应该显示“真”吗
- google-cloud-platform - 如何根据 IAM 角色控制对 GCP 源存储库中分支的写入访问?
- api - Vue axios(和获取)响应未传递到数据属性
- javascript - 日期框返回奇怪的时区偏移