什么❓keyup.enter 和 blur 触发两次❓

问题描述

在 Vue 开发中，我们经常会遇到需要同时处理输入框的 blur（失去焦点）和 keyup.enter（回车键按下）事件的场景。当这两个事件都绑定到同一个处理函数时，会出现一个常见问题：

html 复制代码

<component
  :is="editableComponent"
  v-if="editMode || showInput"
  ref="input"
  @keyup.enter="onInputComplete"
  @blur="onInputComplete"
  v-model="model"
>
  <slot name="edit-component-slot"></slot>
</component>

在这种情况下，当用户按下回车键时，会触发两次 onInputComplete 方法调用：

第一次由 keyup.enter 事件触发
第二次由随之而来的 blur 事件触发

问题原因分析

这种现象的根本原因在于浏览器的事件机制：

事件触发顺序 ：当在输入框中按下回车键时，会先触发 keyup.enter 事件，然后浏览器会自动将焦点从当前输入框移开，从而触发 blur 事件。
行为本质：按下回车键本质上也是一种"完成输入"的行为，通常会伴随着失去焦点的操作，这与直接点击其他地方使输入框失去焦点是类似的交互效果。
双重触发：由于两个事件都绑定了相同的处理函数，导致同一逻辑被执行两次，可能引发数据重复提交、状态异常等问题。

解决方案

方案一：让回车键触发 blur 事件（推荐）

最优雅的解决方案是修改 keyup.enter 的处理方式，让它直接触发 blur 事件，而不是调用处理函数。这样 blur 事件会统一处理所有完成输入的情况：

html 复制代码

<component
  :is="editableComponent"
  v-if="editMode || showInput"
  ref="input"
  @keyup.enter.native="$event.target.blur"
  @blur="onInputComplete"
  v-model="model"
>
  <slot name="edit-component-slot"></slot>
</component>

关键点说明：

@keyup.enter.native="$event.target.blur"：当回车键按下时，直接调用输入框元素的 blur 方法
@blur="onInputComplete"：统一在 blur 事件中处理输入完成逻辑

优点：

代码简洁，逻辑清晰
统一了所有完成输入的路径（无论是回车还是点击其他地方）
避免了重复执行的问题

方案二：使用标志位控制执行

如果不方便修改事件绑定方式，可以使用标志位来控制函数的执行：

html 复制代码

<component
  :is="editableComponent"
  v-if="editMode || showInput"
  ref="input"
  @keyup.enter="handleEnter"
  @blur="handleBlur"
  v-model="model"
>
  <slot name="edit-component-slot"></slot>
</component>

javascript 复制代码

methods: {
  handleEnter() {
    this.isEnterPressed = true;
    this.onInputComplete();
  },
  handleBlur() {
    if (!this.isEnterPressed) {
      this.onInputComplete();
    }
    this.isEnterPressed = false;
  }
}

方案三：使用 setTimeout 延迟处理

javascript 复制代码

methods: {
  onInputComplete() {
    if (this.completeTimeout) {
      clearTimeout(this.completeTimeout);
    }
    
    this.completeTimeout = setTimeout(() => {
      // 实际的完成逻辑
    }, 100);
  }
}

最佳实践建议

推荐使用方案一：它最符合 Vue 的设计哲学，也最容易维护
注意 .native 修饰符：在自定义组件上使用原生事件时需要添加
考虑组件封装：如果这是一个会被复用的组件，应该在组件内部处理好这种事件冲突
保持一致性：整个项目中应该统一采用同一种解决方案

这种问题不仅限于 keyup.enter 和 blur 的组合，其他类似的场景包括：

click 和 dblclick 同时存在时
mousedown 和 click 的触发顺序
移动端 touch 和 click 事件的冲突

理解浏览器事件机制和触发顺序，能够帮助我们更好地处理这类交互问题。

总结

在 Vue 中处理输入完成逻辑时，最优雅的方式是统一通过 blur 事件来处理，而将 keyup.enter 转换为触发 blur 事件。这种方法不仅解决了重复触发的问题，也使代码更加清晰和易于维护。方案一提供的解决方式简单直接，是大多数情况下的最佳选择。