在元素未聚焦之前未添加或删除 BeforeUnload 侦听器

Question

我正在开发一个通用应用程序，让用户输入公式并保存，yadda yadda。我想确保在未保存更改时警告用户，通过应用内路由和 beforeunload 事件触发的提示。两者都应该在发生更改时处于活动状态，但如果没有任何更改/表单为空，则恢复为非活动状态。第一个完美无缺。第二个，“beforeunload”事件也被读取和删除，但前提是触发更改为“isEmpty / isDifferent”状态的输入元素首先未获得焦点。这很烦人，因为当用户开始输入时它不会提供即时反馈，因为即使该字段不为空，用户也可以通过刷新使页面不被警告，因为他没有使输入失去焦点。以下是相关代码：handleBeforeUnload (e) {      console.log('leaving')      e.preventDefault()    },    leaving (preventDefault) {      if (preventDefault) {        window.addEventListener('beforeunload', this.handleBeforeUnload)        console.log('should be added')      } else {        window.removeEventListener('beforeunload', this.handleBeforeUnload)        console.log('should be removed')      }    }  },  components: {    'form-input': Input,    modal: Modal  },  watch: {    isEmpty () {      this.leaving(!this.isEmpty)    }  },现在我只配置了组件来处理新文档，这就是为什么我现在只使用“isEmpty”作为状态。在“handleBeforeUnload”方法之前，该链按预期工作，该方法只能在用户在输入未聚焦后刷新或类似情况下触发。我推测这种行为可能是 Vue 的生命周期钩子的结果，特别是“beforeDestroy”，但我不确定。是什么导致了这种行为？提前致谢。

Answer 1

已解决：这已被确认为我在输入字段上使用“更改”处理程序的副作用，也就是更改处理程序的预期行为。DOM 在“模糊”事件之前没有更新，当我尝试通过验证禁用提交按钮时发现了这一点，这导致了同样的问题。将输入元素上的“change”事件换成“keyup”解决了这个问题。