我在 W3 学校检查了这个代码：
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Write something clever here..";
});
您可以在其中一个 HTML 项目上使用，但要将其应用于导航器的返回按钮？ （例如，为了警告用户如果他继续，我将失去他的工作）
【问题讨论】：
标签： javascript html events navigation
向返回按钮添加事件侦听器，方法与将事件侦听器添加到窗口的方式相同。不要使用 beforeunload，而是使用 click。
您很可能需要创建一个非常简单的自定义警报。我创建了一个 alertUser() 函数，当用户单击返回按钮时将触发该函数。
您将希望在样式表中使用#customAlert {position: absolute, z-index: 10} 格式化divElem。 position:absolute 确保它独立于其父元素中的其他元素。在这种情况下，它是页面的主体。 z-index 上的 10 过多，但确保几乎每次都会出现警报。除非有人使用 z-index 10 或更大来格式化元素。您可以在页面上随意将其居中。
// Add this in your code after you have created the return button.
var returnButton = document.getElementById("returnButtonId")
returnButton.addEventListener("click", () => alertUser(event), false);
function alertUser() {
var divElem = document.createElement("DIV");
var divText = document.createTextNode("If you go back you will lose progress");
divElem.appendChild(divText);
var btnReturn = document.createElement("BUTTON");
var btnStay = document.createElement("BUTTON");
var btnReturnText = document.createTextNode("Go Back");
var btnStayText = document.createTextNode("Stay on page");
btnReturn.appendChild(btnReturnText);
btnStay.appendChild(btnStayText);
divElem.appendChild(btnReturn);
divElem.appendChild(btnStay);
divElem.setAttribute("id", "customAlert")
btnReturn.setAttribute("id", "return");
btnStay.setAttribute("id", "stay");
var returnButton = document.getElementById("return");
var stayButton = document.getElementById("stay")
returnButton.addEventListener('click', () => leavePage(event), false);
stayButton.addEventListener('click', () => stayOnPage(event), false);
}
function leavePage(e) {
alert("Left page, progress lost")
var customAlert = document.getElementById('customAlert')
customAlert.remove()
/**
Your code to handle the user leaving the page
*/
}
function stayOnPage(e) {
alert("Stayed on page")
var customAlert = document.getElementById('customAlert')
customAlert.remove()
/**
Your code to handle the user staying on the page
**/
}
评论更新
在代码中的某个位置创建了导航器及其按钮，在创建过程中应该为按钮分配一个唯一的 ID。在创建导航器按钮并分配 Id 后的某个时间点，您将向导航器按钮添加一个事件侦听器，以包括返回按钮。
var returnButton = document.getElementById('returnButtonIdfromNavigator')
returnButton.addEventListener("click", () => alertUser(event), false);
这是我所做的所有事情的确切代码，即更改您搜索的 ID 名称以符合您的要求，即它是导航器中的按钮。这两行没有创建按钮。它只是为您提供一个变量，该变量是对导航器中实际返回按钮的引用，然后您通过该引用为按钮分配一个事件侦听器。
alertUser() 中创建的两个按钮不是导航的一部分，而是警报系统的一部分。它是“你确定要这样做吗？”给用户。 btnStay 将调用stayOnPage()，并且正如它当前在此示例中所写的那样，它将简单地关闭警报，就好像什么都没发生一样，并允许用户继续他们所在的位置。虽然btnReturn 将调用leavePage()，但如果我正在编写leavePage() 函数，我将使用与不存在警报系统时返回按钮相同的函数。
因此，在将事件侦听器分配给导航按钮时，不要使用 alertUser()，而是使用我假设已经存在的函数用于返回按钮行为。
//Adding event listeners to return button either with or without the warning
//Without alert system
var returnButton = document.getElementById('returnButtonIdfromNavigator')
returnButton.addEventListener("click", () => navigatorReturnButtonFunction(event), false);
/****** VS ******/
//Using alert system
var returnButton = document.getElementById('returnButtonIdfromNavigator')
returnButton.addEventListener("click", () => alertUser(event), false);
【讨论】：
下面的代码用于禁用返回事件，但您可以将其用于您的目的。用户第一次单击后退按钮时，将显示警报消息。第二次点击返回就可以了。
history.pushState(null, null, location.href);
window.onpopstate = function () {
alert("you will lose your job;(");
};
【讨论】：
这个例子很简单。
var formHasUnsavedChanges = false;
window.addEventListener("beforeunload", function (e) {
if (formHasUnsavedChanges === true) {
var msg = "your warning message"; // Some browsers show their own message.
(e || window.event).returnValue = msg;
return msg;
}
});
用户进行更改后，将formHasUnsavedChanges 设置为true。
如果您通过 AJaX 调用保存表单，则可以在保存完成后将变量设置为 false。
如果您使用普通表单，请在提交前将变量设置为false。否则保存时会弹出警告信息。
单击链接或关闭选项卡时也会弹出此警告消息。
【讨论】：
您不是在寻找这个答案吗？ Browser back button "on click" action
这是一段 JS 检测用户何时使用浏览器返回按钮。
【讨论】：
这段代码运行良好：
<script>
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function() {
history.go(1);
};
</script>
【讨论】：