uni-app input 控件 @confirm 事件会触发两次 是什么问题

uni-app input 控件 @confirm 事件会触发两次 是什么问题

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.1.13
手机系统 Android
手机系统版本 Android 8.1
手机厂商 销邦 X8AT
手机机型 PDA
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

看截图

操作步骤：
在APP上操作回车，会触发两次回车事件

预期结果：
一次就行

实际结果：
二次

操作步骤：

一进入页面，input自动聚焦，PDA扫码，当监听到扫码完成后触发confirm 事件。页面前提是创建 2 个input框，第一个input框扫描完成后自动聚焦到第二个input框，当第二个input 框扫描完成后触发第二个input的confirm 事件，发现第二个 input 框 的 confirm 事件会执行两次

预期结果：

第二个input 框 的 confirm 事件执行一次

实际结果：

第二个input 框 的 confirm 事件执行了两次

Image
Image


更多关于uni-app input 控件 @confirm 事件会触发两次 是什么问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

我也存在这个问题 解决了吗？

更多关于uni-app input 控件 @confirm 事件会触发两次 是什么问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


做下节流防抖试试

在 uni-app 中，@confirm 事件触发两次通常是由于以下原因：

  1. 事件冒泡：若父组件绑定了相同事件，子组件的 @confirm 可能冒泡到父组件触发两次。检查代码结构，使用 .stop 修饰符阻止冒泡，例如 @confirm.stop="handleConfirm"。

  2. 重复绑定：动态创建组件或条件渲染时，可能重复绑定事件。确保在 v-if 或 v-for 等场景下没有重复注册事件监听器。

  3. 焦点切换触发：在自动聚焦到第二个输入框时，若焦点切换逻辑与 @confirm 冲突，可能间接触发二次事件。检查聚焦代码（如 this.$refs.input2.focus()）是否在 @confirm 中重复调用。

  4. 平台兼容性：部分 Android 设备或 PDA 扫描枪可能发送多次回车事件。可在事件处理函数中添加防抖逻辑，例如：

    let confirmTimer = null;
handleConfirm() {
  clearTimeout(confirmTimer);
  confirmTimer = setTimeout(() => {
    // 处理逻辑
  }, 100);
}
回到顶部