Javascript 在提交时禁用AddEventListener

当用户单击提交时，我试图禁用传递给

addEventListener

的功能。我输入代码是为了防止用户在任何字段上输入数据后离开页面。这个很好用。如果用户试图导航离开，他们会收到预期的警告。但是，我似乎不知道如何在填充所有字段并且用户单击submit之后禁用此功能。目前，当他们单击提交时，系统会提示他们确保他们想要导航离开，我不希望在用户单击提交时发生这种情况

我尝试了以下类似的方法，尝试基于submit在卸载之前解除

函数的绑定，但这不起作用。我觉得这是一个正确的总体想法，但我正在努力使这项工作如我所愿

$（'form'）。提交（函数（）{
$（窗口）.unbind（'beforeunload'）；
});
$（窗口）.on（'beforeunload'，function（））{
返回“”；
});

以下代码按预期工作：

window.addEventListener（'beforeunload'，函数（事件）{
console.log（“检查表单”）；
让inputValue=document.querySelector（'#myInput'）.value；
如果（inputValue.length>0）{
console.log（输入值）；
event.returnValue='您确定要离开吗？'；
}
event.preventDefault（）；
});

如果用户单击submit，我希望基本上关闭
beforeunload
功能
 如果使用
.on（）
绑定处理程序，则可以使用
.off（）
删除绑定的事件

但是，我觉得在您的场景中，如果您以逻辑方式处理表单提交，那么在卸载之前根本不需要

我已经模拟了一个示例，演示了如果用户根据条件选择提交表单（在本例中，如果所有字段都未填充），您如何在逻辑上提交表单


$（'form'）。关于（'submit'，函数（e）{
变量输入=$（'：text'，this）；
console.log（inputs.length）
var validInputs=inputs.filter（函数（）{
返回$（this）.val（）.length；
}).长度；
if（validInputs>0&&validInputs


提交
更新
要在离开表单之前提示用户，请执行以下操作：

看到这个了吗

在每个字段上使用
required
属性，您将不需要执行所有这些操作。如果有空白字段，下面的演示将拒绝任何提交表单的尝试。它将发送到实时测试服务器，并显示一个响应，验证提交是否成功

演示

window.onbeforeunload=函数（）{
return“您确定要离开吗？”；
};
标签{
显示：内联块；
宽度：75px
}
[类型=提交]{
左边距：200px
}

名称：

单元格：

日期：

能够使用Biperty通过此SO问题提出的建议解决此问题。。。。最后，下面的代码是我在提交表单时在卸载之前关闭的代码

var submitting = false;

window.addEventListener("beforeunload", function (event) {
  console.log('checking form');

  let inputValue = document.querySelector('#myInput').value;
  if(inputValue.length > 0 && submitting === false) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }

  event.preventDefault();

});

document.addEventListener("submit", function(event) { 
  submitting = true;
});

不能将
元素.removeEventListener
与匿名函数一起使用。如果你想在某个时候删除它，你需要把它变成一个可以被引用的函数name@enhzflep谢谢你提供的信息。所以我必须为removeEventListener编写一个单独的函数？如果我正确理解了你的问题，就不会了。处理事件的函数应该有一个名称。从那里，您可以使用以下内容：
element.addEventListener（'eventName'，functionName，false）
然后在后面加上`element.removeEventListener（'eventName'，functionName）；谢谢你提供的信息。我以前是这样做的，但我试图对我的表格做更具体的描述。今天，如果我使用上面的方法，它会起作用，但是当用户试图使用链接导航离开页面时，上面的方法也会起作用。我试图使用addeventlistener实现字段特定，但现在我不知道如何禁用每个eventlistener。如果有更好的方法去做我想做的事情，我也愿意接受。你是说如果，假设你有5条输入，用户至少填写了1个字段，但不是全部填写了5个字段，然后系统会提示他们，因此表单不会提交？如果所有字段都已填写，则仍会提示用户单击以确保他们要提交表单。我不希望在用户单击提交时弹出“您确定吗？”对话框。请参阅我为您创建的代码段。这是你想要达到的目标吗？我正在测试，它似乎没有开火。我的其他职责是……谢谢你的建议。当用户还没有完成表单时，我试图阻止他们离开页面，如果他们已经完成了表单，我试图允许提交在没有提示的情况下工作。你是说你的代码可以让我完成这个任务吗？你测试过这个演示了吗？对于实时测试服务器来说，这是一个真正的功能表单。
name.widget.attrs['required']='required'
谢谢。是的，我已经设置了表格来要求这些字段。那不是我的问题。问题是当我试图阻止用户使用beforeunload函数离开页面时。我似乎不知道如何防止用户单击“提交”时触发beforeunload。您测试过我的演示吗？在真正提交数据后，页面仍然存在。
window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

var submitting = false;

window.addEventListener("beforeunload", function (event) {
  console.log('checking form');

  let inputValue = document.querySelector('#myInput').value;
  if(inputValue.length > 0 && submitting === false) {
    console.log(inputValue);
    event.returnValue = 'Are you sure you wish to leave?';
  }

  event.preventDefault();

});

document.addEventListener("submit", function(event) { 
  submitting = true;
});