Javascript 如何知道我们是否要离开网页？

我的页面上有一张表格。如果由于beforeunload事件而更改，则用户将有一个对话框，用于捕获休假过程

如果用户单击“继续”或“离开”，则新页面正在加载，表单数据将丢失

如果用户单击“取消”，休假过程将被取消

我们如何知道用户何时单击了“取消”

为什么我要知道

---

就我而言，我有一个开关按钮。当用户打开它时，脚本将尝试重新加载页面。如果用户单击“继续”或“离开”，则可以。但是，如果用户单击“取消”，我希望显示“关闭”位置上的开关。

当用户更改按钮位置，然后尝试离开，但随后取消时，按钮的状态应更改为关闭。我们可以使用window.onbeforeunload函数并在其代码块中返回false。请参见下面的示例，注意我使用了复选框而不是切换开关，但是您可以根据需要在window.onbeforeuload函数中键入任何内容

window.onbeforeunload=（）=>{
document.getElementById（“复选框”）.checked=false；
返回false；
}

.checkbox{
边缘顶部：20px；
左边距：20px；
}

单击下面的链接应提示“离开”或“取消”选项。如果选中该复选框，然后单击链接，然后单击“取消”，复选框应返回false

要处理按钮的状态，我们可以使用localStorage和setInterval计时器检查用户是否已离开站点，并使用onbeforeunload事件提示用户离开或取消。当用户取消时，间隔倒计时为0，这意味着用户仍在您的站点上并更新localStorage，但如果保留，间隔将不会继续，并且不会更改localStorage值，因此，当返回站点时，选中的按钮应更新到上一位置。请注意，当您单击此站点上的“运行代码段”时，它可能不适用于本地存储、从您的站点或在上运行此代码。：-）

window.onload=（）=>{
//声明和初始化
常量输入=document.createElement（“输入”）；
const defaultCounterValue=10；//增量--
常量DefaultInterValveValue=50；//ms
const checkbox=document.getElementById（'checkbox'）；
const setLocalStorage=（itemName，itemValue）=>{
setItem（itemName，itemValue）；
};
const getLocalStorage=（itemName）=>{
返回localStorage.getItem（itemName）==null？false:localStorage.getItem（itemName）===false'？false:true；
};
设区间=未定义；
让计数器=默认计数器值；
setLocalStorage（'checkbox'，getLocalStorage（'checkbox'）.toString（）；
设置超时（（）=>{
checkbox.checked=getLocalStorage（'checkbox'）；
}, 0);
复选框.addEventListener（'单击'，（）=>{
setLocalStorage（'checkbox'，checkbox.checked）；
});
//设置输入属性和事件处理程序
input.type='复选框'；
input.checked=false；
input.style.display='none'；
input.addEventListener（'单击'，（）=>{
让removeInterval=（）=>{
间隔时间；
间隔=未定义；
}
如果（间隔）{
去除间期（）；
}
间隔=设置间隔（（）=>{
如果（input.checked==true）{
如果（计数器==0）{
checkbox.checked=false；
setLocalStorage（'checkbox'，checkbox.checked）；
计数器=默认计数器值；
input.checked=false；
}
计数器--；
}否则{
去除间期（）；
}
}，默认值）；
});
document.body.appendChild（输入）；
//在用户离开之前运行的事件
window.onbeforeunload=（事件）=>{
event.preventDefault=true；
event.cancelBubble=true；
event.returnValue=null；
input.checked=false；
输入。单击（）；
};
}

.checkbox{
边缘顶部：20px；
左边距：20px；
}

单击下面的链接应提示“离开”或“取消”选项。如果选中该复选框，然后单击链接，然后单击“取消”，复选框应返回false

我们不能。无论你做什么，用户都可以以一种即时终止选项卡的方式终止选项卡，因此，相反，设计代码时不要依赖这些知识。@Mike'Pomax'Kamermans，但在我的例子中，用户留在页面上。不是根据你的标题和你的文章，所以：解决这个问题。用户要么留在您的页面上，要么离开您的页面。他们不能两者兼得，我认为这是不可能的。当他们取消导航时，为什么你需要做些什么？我相信这里可以回答你的问题：当复选框被选中时。我点击链接离开页面。对话框被打开。然后，如果我点击“取消”，复选框被正确地取消选中。但如果我点击对话框的“离开”按钮。该复选框也未选中。如果这个复选框保持选中状态就好了。