什么❓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 方法调用:

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

问题原因分析

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

  1. 事件触发顺序 :当在输入框中按下回车键时,会先触发 keyup.enter 事件,然后浏览器会自动将焦点从当前输入框移开,从而触发 blur 事件。

  2. 行为本质:按下回车键本质上也是一种"完成输入"的行为,通常会伴随着失去焦点的操作,这与直接点击其他地方使输入框失去焦点是类似的交互效果。

  3. 双重触发:由于两个事件都绑定了相同的处理函数,导致同一逻辑被执行两次,可能引发数据重复提交、状态异常等问题。

解决方案

方案一:让回车键触发 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>

关键点说明

  1. @keyup.enter.native="$event.target.blur":当回车键按下时,直接调用输入框元素的 blur 方法
  2. @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);
  }
}

最佳实践建议

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

这种问题不仅限于 keyup.enterblur 的组合,其他类似的场景包括:

  1. clickdblclick 同时存在时
  2. mousedownclick 的触发顺序
  3. 移动端 touchclick 事件的冲突

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

总结

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

相关推荐
誰能久伴不乏12 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端