在元素未聚焦之前未添加或删除 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”解决了这个问题。