uni-app 飞书小程序 click 触发两次

uni-app 飞书小程序 click 触发两次

开发环境 版本号 项目创建方式
Mac 12.3.1 HBuilderX
HBuilderX 3.4.7
第三方工具 2.13.2
基础库 1.9.65.5

操作步骤：

<button [@click](/user/click)="log">log</button>  
function log(){  
console.log("click")  
}

点击button

预期结果：

输出一次 click

实际结果：

输出两次 click

bug描述：

使用 @click 点击 会触发两次方法

屏幕录制2022-05-11_17.30_.10_.mov_.zip


更多关于uni-app 飞书小程序 click 触发两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

未复现此问题，请详细描述您的问题，【咨询问题/bug处理优先级规则】：https://ask.dcloud.net.cn/article/38139

更多关于uni-app 飞书小程序 click 触发两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已上传视频附件，麻烦查看一下

在开发 uni-app 飞书小程序时，如果遇到 click 事件触发两次的问题，可能是由于以下原因之一导致的。以下是一些常见的排查和解决方法：

1. 事件冒泡

  • 原因：如果事件绑定在父元素和子元素上，点击子元素时，事件会冒泡到父元素，导致父元素的事件也被触发。
  • 解决方法：
    • 使用 [@click](/user/click).stop 阻止事件冒泡。
    <view [@click](/user/click)="handleParentClick">
  <view [@click](/user/click).stop="handleChildClick">子元素</view>
</view>

2. 重复绑定事件

  • 原因：可能在代码中多次绑定了同一个事件，导致事件被触发多次。
  • 解决方法：
    • 检查代码，确保事件只绑定一次。
    • 如果是动态绑定的，确保在绑定前先解绑。

3. 飞书小程序的兼容性问题

  • 原因：飞书小程序的某些版本可能存在兼容性问题，导致事件触发异常。
  • 解决方法：
    • 更新飞书小程序开发工具和 SDK 到最新版本。
    • 检查飞书小程序的官方文档，查看是否有已知问题。

4. 异步操作导致的问题

  • 原因：如果事件处理函数中有异步操作（如网络请求），可能会导致事件被多次触发。
  • 解决方法：
    • 在事件处理函数中添加防抖（debounce）或节流（throttle）逻辑。
    let isClicking = false;
function handleClick() {
  if (isClicking) return;
  isClicking = true;
  // 执行操作
  setTimeout(() => {
    isClicking = false;
  }, 1000); // 1秒内只允许触发一次
}

5. 组件库的默认行为

  • 原因：某些 UI 组件库（如 uView）可能会默认绑定事件，导致事件被触发多次。
  • 解决方法：
    • 检查使用的组件库文档，确认是否有默认事件绑定。
    • 如果需要，手动解绑或覆盖默认行为。

6. 调试工具的问题

  • 原因：开发工具（如飞书小程序开发者工具）可能存在 bug，导致事件触发异常。
  • 解决方法：
    • 尝试在真机上测试，确认是否是工具的问题。
    • 重启开发工具或清除缓存。

7. 代码逻辑问题

  • 原因：代码中可能存在逻辑错误，导致事件被多次触发。
  • 解决方法：
    • 仔细检查事件绑定的代码，确保逻辑正确。
    • 使用 console.log 或断点调试，确认事件触发的次数和时机。

示例代码

以下是一个防止事件触发两次的示例：

<template>
  <view [@click](/user/click)="handleClick">点击我</view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      if (this.isClicking) return;
      this.isClicking = true;
      console.log("点击事件触发");
      // 执行操作
      setTimeout(() => {
        this.isClicking = false;
      }, 1000); // 1秒内只允许触发一次
    },
  },
  data() {
    return {
      isClicking: false,
    };
  },
};
</script>
回到顶部