防止多次点击重复事件

1.如果是按钮,可以点击发送请求前,将其disabled,之后再放开,

2. unbind() 方法,会删除指定元素的所有事件处理程序。

3  .style { pointer-events: none; },点击后给相应元素加class,禁用点击事件,想用的时候在将该class移除即可

4.

// 提交表单数据到后台处理

$.ajax({

type: "post",

data: studentInfo,

contentType: "application/json",

url: "/Home/Submit",

beforeSend: function () {

// 禁用按钮防止重复提交

$("#submit").attr({ disabled: "disabled" });

},

success: function (data) {

if (data == "Success") {

//清空输入框 clearBox(); } },

complete: function () {

$("#submit").removeAttr("disabled");

},

error: function (data) { console.info("error: " + data.responseText); } });

在 UniApp 中实现按钮防止重复点击的功能,可以通过多种方式实现,以下是一些常见的解决方案及其详细说明。 ### 使用状态标志防止重复点击 最简单的方法是通过一个状态变量来控制按钮是否处于提交状态。当按钮被点击时,将状态变量设置为 `true`,并在请求完成后将其重置为 `false`。这样可以确保在请求完成之前按钮不会被再次点击。 ```javascript submit() { if (this.isSubmitting) { return; } this.isSubmitting = true; try { this.$u.api.testRequestApi(this.model).then(res => { if (res.success) { uni.showToast({ title: '操作成功', icon: 'none', duration: 3000 }); } setTimeout(() => { this.isSubmitting = false; }, 1500); }); } catch (error) { this.isSubmitting = false; } } ``` [^1] ### 使用请求拦截器和响应拦截器 另一种方法是在请求拦截器和响应拦截器中控制按钮的状态。这种方法可以在全局范围内控制按钮的状态,而不需要在每个页面中单独处理。 ```javascript http.interceptor.request((config, cancel) => { uni.showLoading({ title: "加载中", mask: true }); config.header = { ...config.header, 'X-Access-Token': getTokenStorage() }; return config; }); http.interceptor.response(async (response) => { uni.hideLoading(); return response; }, (response) => { uni.hideLoading(); return response; }); ``` [^2] ### 使用自定义插件防止重复点击 可以通过创建一个自定义插件来防止按钮的重复点击。这个插件可以全局注册,并在每次点击时检查是否已经有一个点击事件正在处理。 ```javascript import noMultipleClicks from './wmkit/noclick.js'; Vue.prototype.$noMultipleClicks = noMultipleClicks.noMultipleClicks; function noMultipleClicks(methods, info) { let that = this; if (that.functionName != methods || that.info != info) { that.noClick = true; }; if (that.noClick) { that.noClick = false; that.functionName = methods; that.info = info; if (info && info !== '') { methods(info); } else { methods(); } setTimeout(() => { that.noClick = true; }, 500); } else { uni.showToast({ title: '请稍后操作', icon: 'none' }); } } export default { noMultipleClicks } ``` [^3] ### 结合状态标志和请求处理 在某些情况下,可以结合状态标志和请求处理来实现按钮的防重复点击。这种方法可以在请求开始时禁用按钮,并在请求完成后重新启用按钮。 ```javascript handleConfirm(e) { if (this.isSubmitting) { return; } this.isSubmitting = true; try { updateProjectChildTask({ id: e.id, taskStatus: '2' }).then(res => { if (res.code == 200) { uni.showToast({ title: '任务开始', icon: 'success', duration: 1000 }); } setTimeout(() => { this.isSubmitting = false; }, 1500); }); } catch (error) { this.isSubmitting = false; } } ``` [^4] ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值