如何不让别人点击导航器的 return 按钮？

Question

我在 W3 学校检查了这段代码:

window.addEventListener("beforeunload", function(event) {
  event.returnValue = "Write something clever here..";
});

您可以在您的 HTML 项目之一上使用，但要将其应用于导航器的 return 按钮？（为了警告用户，如果他继续，我将失去他的工作）

Answer 1

将事件侦听器添加到 return 按钮的方式与将其添加到 window 的方式相同。不要使用 beforeunload，而是使用 click。

您很可能需要创建自定义警报，这非常简单。我创建了一个 alertUser() 函数，该函数将在用户单击 return 按钮时触发。

您将要按照您的风格 sheet 使用 #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 后的某个时候，您将向导航器按钮添加一个事件侦听器，以包含 return 按钮。

var returnButton = document.getElementById('returnButtonIdfromNavigator') 
returnButton.addEventListener("click", () => alertUser(event), false);

这正是我所做的全部代码，更改了您搜索的 ID 名称，以符合您将其作为导航器按钮的要求。这两行没有创建按钮。它只是给你一个变量，它是对导航器中实际 return 按钮的引用，然后你通过该引用为按钮分配一个事件侦听器。

在 alertUser() 中创建的两个按钮不是导航的一部分，而是警报系统的一部分。它是 "Are you sure you want to do this?" 给用户的。 btnStay 将调用 stayOnPage()，并且正如其当前在此示例中所写的那样，将简单地解除警报，就好像什么都没发生一样，并允许用户继续他们所在的位置。虽然 btnReturn 将调用 leavePage()，如果我正在编写 leavePage() 函数，我将使用与 return 按钮在警报系统不存在时将使用的相同功能。

因此，在将事件侦听器分配给您的导航按钮时，您可以使用我假设已经存在的函数来实现 return 按钮行为，而不是使用 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);

Answer 2

下面的代码用于禁用返回事件，但您可以将其用于您的目的。用户第一次单击后退按钮时，将显示警告消息。第二次单击后退将起作用。

history.pushState(null, null, location.href);
window.onpopstate = function () {
   alert("you will lose your job;(");
};

Answer 3

这个例子很简单。

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。否则保存时会弹出警告信息

单击 link 或关闭选项卡时也会弹出此警告消息。

Answer 4

您不是在寻找这个答案吗？ Browser back button "on click" action

这是一段 JS，用于检测用户何时使用浏览器后退按钮。

Answer 5

此代码运行良好：

<script>
    history.pushState(null, null, location.href);
    history.back();
    history.forward();
    window.onpopstate = function() {
        history.go(1);
    };
</script>

如何不让别人点击导航器的 return 按钮？

How not to let someone click on return button of navigator?

html

javascript

navigation

events