Javascript removeEventListener用于Firefox和IE中提交后处理的beforeunload

我被要求实现一个功能

在更改表单元素之前，网页的“操作”按钮处于禁用状态

当用户发起事件时，网页会发出警告消息，当存在未保存的更改时，该事件将离开网页

启用“提交”按钮后，单击“提交”按钮应像正常情况一样提交（不应显示弹出警告）

下面是解决方案中使用的代码示例。

hasChanged

变量用于控制是否可以在有消息或无消息的情况下重新加载页面。在FF和IE中卸载窗口之前，变量似乎没有得到更新，但在Chrome中得到了更新

内联提交调用已经存在。我不知道为什么-那部分是继承的：

HTML:

<form id="form" method="post" action="http://www.google.com">
<textarea class="watch" name="" id="" cols="30" rows="10"></textarea>
</form>
<br><br>
<div class="submit disabled">
<a class="" href="#" onclick="$('#form').submit();$(this).text('saving...');">Submit</a>
</div>

var hasChanged=false;
$('textarea.watch').on('keyup change', function(){
    hasChanged = true;
    $('.submit').removeClass('disabled');
});
$('.submit a').click(function() {
    hasChanged = false;
    window.removeEventListener('beforeunload');
});
window.addEventListener('beforeunload', function (e) {
    var confirmationMessage = 'You have unsaved changes.';
    if (hasChanged) {
        (e || window.event).returnValue = confirmationMessage;
        return confirmationMessage;
    }
});

.disabled a {
    pointer-events: none;
    color:#aaa;
    text-decoration:none;
}

CSS:

<form id="form" method="post" action="http://www.google.com">
<textarea class="watch" name="" id="" cols="30" rows="10"></textarea>
</form>
<br><br>
<div class="submit disabled">
<a class="" href="#" onclick="$('#form').submit();$(this).text('saving...');">Submit</a>
</div>

var hasChanged=false;
$('textarea.watch').on('keyup change', function(){
    hasChanged = true;
    $('.submit').removeClass('disabled');
});
$('.submit a').click(function() {
    hasChanged = false;
    window.removeEventListener('beforeunload');
});
window.addEventListener('beforeunload', function (e) {
    var confirmationMessage = 'You have unsaved changes.';
    if (hasChanged) {
        (e || window.event).returnValue = confirmationMessage;
        return confirmationMessage;
    }
});

.disabled a {
    pointer-events: none;
    color:#aaa;
    text-decoration:none;
}

在调用Submit函数之前，我尝试在“Submit”按钮上取消绑定beforeunload，但这似乎不起作用：

<a class="" href="#" onclick="$(window).unbind('beforeunload');('#form').submit();$(this).text('saving...');">Submit</a>

---

实际问题（在Chrome中打开，然后在Firefox/IE中打开）：

问题可能是因为在FF/Chrome中有内联的

onClick

逻辑以不同的顺序执行。向谷歌发布表单时也存在跨源错误，在浏览器中的行为可能会有所不同

另外，您不需要解除事件绑定，

hasChanged

变量应该会处理这个问题（如果我正确理解逻辑的话）。如果取消绑定事件，则需要将函数作为参数引入（请参见另一个答案）

请参阅此演示：

---

谢谢发布到谷歌的帖子只是为了演示（我想到的第一个url）。我看到这在小提琴上是可行的，但是，它在实际实现中使事情变得更糟。现在Chrome和FF都在提交时显示警告消息。我将继续查看代码（都是继承的）。这是正确的答案，尽管在这个项目中还有一些其他代码阻止它工作。我接受了。