uni-app 小程序点击事件多次点击后会触发其他方法

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app 小程序点击事件多次点击后会触发其他方法

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Windows
手机系统：iOS
手机系统版本号：iOS 17
手机厂商：苹果
手机机型：iphone14pro
页面类型：vue
vue版本：vue2
打包方式：云端

示例代码：

<view class="nav-box">
<view class=" centerboth swich-box">
<!--    <uv-slider v-model="select" step="0.01" min="0" max="1" v-if="!newBlue.isQd" block-color=" #e50070" block-size="44" activeColor="#e50070" blockStyle="border:2rpx solid #fff"
@changing="changeStep" @change="changeBlue($event,item,2)" customStyle='margin:0'></uv-slider>
<view class="btn-close" v-else @click="close">
<text class="iconfont"></text>
</view> -->
<view style="width: 220rpx;height: 100%;position: relative;" key="1" v-if="!newBlue.isQd" @click.stop="changeCz(0x35,1)">
<view class="btn-open" @touchstart="keepStar" @touchend="downMove" :style="{left:left+'px'}" :class="{'cur':!newBlue.isConnect}" @touchmove="moveBtn" direction="horizontal">
<view class="iconfont">

</view>
</view>
</view>
<view class="btn-close" v-else @click.stop="close" key="2">
<text class="iconfont" style="font-size: 58rpx;"></text>
</view>
<view class="iconfont ico" v-if="!newBlue.isQd">

</view>
</view>
<view class="nav-title">{{newBlue.isQd?'点击关锁':'滑动开启'}}</view>
</view>

以上为A按钮

<view class="left-box" @click.stop="goSetNew">
<image src="../../static/set.png" mode="widthFix"></image>  
</view>

以上为B按钮

操作步骤：

重复多次点击A会触发B按钮的事件

预期结果：

希望能正常只触发A按钮

实际结果：

重复多次点击A会触发B按钮的事件

bug描述：

比如，A按钮的点击事件 Afun ，B按钮的点击事件Bfun 。我多次点击A 会触发Bfun。 两者位置差的挺远的，


Harmonyos Next教程
7 回复

应该不会，提供个完整复现工程吧。你标题里写着小程序，我看分类是 app，提供下 准确信息吧，如果是小程序，真机会这样，安卓和 ios 都错误吗


APP不会这样，分类搞错了。抱歉。安卓ios小程序都是这样。我上传一下操作视频吧。

这里是操作视频

应该是你业务的问题，你可以添加样式 border 确定 tap 点击的范围。视频中点击之后 ui 有明显的变化。如果你认为有问题，可以提供一个复现工程。

回复 DCloud_UNI_OttoJi: 是有ui变动，但是通过v-if判断的展示状态，和跳转的事件完全不搭，而且同样的代码在小程序和app表现不同，APP端是没问题的。复现工程怎么提供呢？

回复 8***@qq.com: 提供脱敏后的代码私聊我提供压缩包

在uni-app中，点击事件多次快速触发可能会导致多次调用相应的方法，从而可能间接触发其他逻辑或方法。为了避免这种情况，我们可以使用防抖（debounce）或节流（throttle）技术。这里我将提供一个防抖的示例代码，来帮助你解决点击事件多次触发的问题。

防抖（Debounce）示例

防抖的基本思想是，在事件被触发后的一段时间内，如果事件再次被触发，则重新计时，直到事件停止触发一段时间后，才执行一次回调函数。

  1. 安装lodash库（如果你没有安装的话，lodash是一个提供了许多实用函数的JavaScript库，包括防抖和节流函数）：

    npm install lodash

  2. 在uni-app项目中使用防抖：

    在你的页面的<script>标签内，首先引入lodash库，然后定义一个防抖函数，并将其应用到你的点击事件处理函数中。

    import _ from 'lodash';

export default {
  data() {
    return {
      // 你的数据
    };
  },
  methods: {
    // 原始点击事件处理函数
    handleClick() {
      console.log('Click event triggered');
      // 这里可以放置你的业务逻辑
    },

    // 使用lodash的debounce创建一个防抖函数
    debouncedHandleClick: _.debounce(function() {
      this.handleClick();
    }, 300), // 300毫秒的延迟时间

    // 在模板中点击事件绑定的方法
    onButtonClick() {
      this.debouncedHandleClick();
    }
  }
};

  3. 在模板中使用：

    在你的页面的<template>中，将点击事件绑定到onButtonClick方法上。

    <template>
  <view>
    <button @click="onButtonClick">Click Me</button>
  </view>
</template>

通过上述步骤，你就成功地在uni-app中实现了点击事件的防抖处理。这样，即使在短时间内多次点击按钮，handleClick方法也只会在最后一次点击后的300毫秒（或者你设定的其他时间）被调用一次，从而避免了多次触发可能导致的其他问题。

防抖和节流是处理频繁触发事件的两种常见技术，根据具体场景选择合适的技术可以有效提升应用的性能和用户体验。在这个例子中，防抖非常适合用于处理快速连续的点击事件。

回到顶部