uni-app 支付宝小程序在iPhone 15.0以上系统手机上，多个按钮添加tap事件快速切换点击时，第二个按钮不触发

uni-app 支付宝小程序在iPhone 15.0以上系统手机上，多个按钮添加tap事件快速切换点击时，第二个按钮不触发

17 回复

直接使用支付宝小程序（不使用 uni-app）测试一下，是否存在此问题？

更多关于uni-app 支付宝小程序在iPhone 15.0以上系统手机上，多个按钮添加tap事件快速切换点击时，第二个按钮不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经测过了，支付宝小程序直接写，没有任何问题。只要uniapp，必显。

uni-app模板里的button组件页面里的button按钮，如果按照上面的操作方式问题也是必显的

回复 Mrfox: 切换支付宝小程序里的配置项试试 ，比如 2.x 之类的

回复 DCloud_UNI_Anne: 配置项在哪里

回复 4***@qq.com: 支付宝小程序开发者工具右上角详情里

回复 DCloud_UNI_Anne: 项目是使用的2.0基础库配置

回复 DCloud_UNI_Anne: 也尝试过了，不行的。这肯定是一个bug，官方的button组件示例都存在这样的问题，希望尽快确认，修复解决

回复 Mrfox: ios15系统手机测试，未复现你说的【肯定不触发】问题。请提供下设备的详情信息，另外你换个手机测试看看

回复 Mrfox: 请补充下详细的复现步骤

回复 DCloud_UNI_Anne: 已上传附件

请看附件 uniapp01.jpg是页面，页面上有三个按钮按钮01，按钮02，按钮03， 依次点击按钮01，按钮02，按钮03正常应该输出---------按钮------------- 01，---------按钮------------- 02，---------按钮------------- 03 但如果快速的点击按钮01，按钮02，按钮03输出的却是---------按钮------------- 01，---------按钮------------- 03 详情请看uniapp02.jpg,其中前三条是一个一个慢慢点击的，输出是正常的，后面几条是快速点击就会出现第二个按钮不详情 设备信息在uniapp02.jpg右上角


代码截图如下


勾选下【启用小程序基础库2.0构建】

或者用HBuilder 3.2.10 alpha版本会自动勾选此项 勾选后，测试vue3版本正常，vue2版本复现问题
已记录此问题，后续修复，感谢您的反馈！

我的HBuilder是3.2.9.20210927，构建是不管勾不勾选【启用小程序基础库2.0构建】此问题也都会必显，请记录

回复 Mrfox: 问题已记录，已加分，感谢你的反馈！

在 uni-app 支付宝小程序中，iPhone 15.0 以上系统出现快速切换点击按钮时第二个按钮事件不触发的问题，通常与支付宝小程序框架的事件处理机制和 iOS 系统的事件响应优化有关。以下是可能的原因和解决方案：

  1. 事件冒泡与捕获机制
    支付宝小程序在 iOS 15+ 系统上可能对快速连续点击的事件处理进行了优化，导致事件冒泡或捕获阶段被中断。可以尝试在按钮的 tap 事件中调用 event.stopPropagation() 阻止事件冒泡，或使用 catchtap 代替 bindtap 来绑定事件，确保事件在捕获阶段被处理。

  2. 异步事件处理延迟
    快速点击可能导致事件队列堆积，第二个按钮的事件被丢弃。建议在事件处理函数中添加防抖（debounce）或节流（throttle）逻辑，确保短时间内只处理一次点击。例如：

    let canClick = true;
function handleTap() {
    if (!canClick) return;
    canClick = false;
    // 执行操作
    setTimeout(() => { canClick = true; }, 300);
}

  3. 支付宝小程序基础库兼容性
    检查支付宝小程序基础库版本是否过低，升级到最新版本可能修复已知的 iOS 事件处理问题。在 app.json 中配置 "enableAppxNg": true 以启用新版框架，可能改善事件响应。

  4. 使用 data- 自定义数据绑定
    如果按钮通过循环渲染，确保每个按钮的 data-* 属性值唯一，避免事件触发时数据混淆。例如：

    <button v-for="(item, index) in list" :key="index" [@tap](/user/tap)="handleTap" :data-index="index">
    按钮{{index}}
</button>
回到顶部