uniapp防连续点击出错_防止处理多次点击公共方法-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaowenxue/article/details/119181236

本文介绍了一种防止用户连续点击导致错误的方法，通过创建common.js文件并导出noMultipleClicks函数，实现了点击事件的防多次触发。在Vue项目中，通过在min.js引入并绑定到Vue原型上，然后在data中设置noClick状态，并在视图中使用@click.stop调用，确保每个事件只执行一次，有效避免了连续点击问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.这里总结一个防止连续点击出错的解决方法
在你的项目中创建一个common文件，跟page平级，在common文件里面创建一个common.js,在js文件里面写下以下代码
在这里插入图片描述
以下可以复制，可根据截图对比，复制整理代码。

// 防止处理多次点击
function noMultipleClicks(methods, info) {
    // methods是需要点击后需要执行的函数， info是点击需要传的参数
    let that = this;
    if (that.noClick) {
        // 第一次点击
        that.noClick= false;
        if(info && info !== '') {
            // info是执行函数需要传的参数
            methods(info);
        } else {
            methods();
        }
        setTimeout(()=> {
            that.noClick= true;
        }, 2000)
    } else {
        // 这里是重复点击的判断
    }
}
//导出
export default {
    noMultipleClicks,//禁止多次点击
}

2.主要部分在min.js中引入

//配置公共方法
import common from './common/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

3.使用方法，在data中return一下noClick:true,

<view class="delnews" @click.stop="$noMultipleClicks(delnews, item)">删除</view>

在这里插入图片描述

4.在methods中照常写事件就可以，这样就发现只能点击一次，防止连续点击出错