uniapp开发解决多次点击触发事件

最新推荐文章于 2025-03-24 11:22:45 发布

全栈进阶中........

最新推荐文章于 2025-03-24 11:22:45 发布

阅读量1.2w

点赞数 9

文章标签： js

本文链接：https://blog.csdn.net/weixin_45581741/article/details/106694815

版权

本文介绍了一种在Vue项目中防止按钮等元素被重复点击的方法，通过创建一个名为dianji的函数并将其挂载到Vue原型上，实现全局防抖效果，避免因快速连续点击导致的用户体验下降及潜在的后台压力。

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

1.先创建一个文件交common文件在文件下面创建一个common.js文件内容如下

// 处理多次点击
function dianji(fn) {
    let that = this;
    if (that.onoff) {
        that.onoff = false;
        fn();
        setTimeout(function () {
            that.onoff = true;
        }, 1500)
    } else {
    	//如果一直走else分支可能是你没有在页面的data下面挂载onoff:true,不然一直都会走else
        console.log("请稍后点击")
    }
}
export {
    dianji
}
2.在main.js中引入然后挂载待vue原型上这样就可以全局使用了
import { dianji } from './common/common'
Vue.prototype.$dianji = dianji;
3.使用的时候
        <view class="list-container" @click="$dianji(target)"> 
target：就是你需要触发的函数;