微信小程序如何避免按钮多次点击重复触发事件

​比如页面有一个form表单，快速重复点击两次提交按钮，你会发现提交了数据两次，这种现象在正常情况下不会发生，只有当网络非常不好或者手机设备实在太差的时候才会发生。当作为一个严谨好的应用，这种情况是不应该发生，那么如何避免按钮多次点击重复触发事件呢？创新互联参考微信小程序开发文档以及网络搜索找到了如下几个方法：
方法一、解决问题主要思路是当按钮被第一次点击时，设置按钮disabled属性为true，从而避免被再次点击。方法解决步骤如下：
1、增加页面data参数disabled，这个参数名可自己随意定义，设置初始值为false;
2、页面绑定按钮disabled属性，具体代码片段发布;
3、当事件执行开始时，加入代码 this.setData({disabled:true})，就是设置按钮为不可用；
4、事件执行完毕，重新初始化按钮disabled属性，有两种情况： 如果事件执行完页面发生跳转如navigateTo 当返回的时候，你会发觉按钮不可用，这时候
需要在onShow事件加入代码
onShow:function() {
this.setData({disabled:false})
}
如果页面不需要跳转，直接在事件执行完毕的时候加入this.setData({disabled:false})
这时候你会问，为什么不都在事件执行完毕时候设置disabled为false.当页面发生跳转的时候不好用，我自己测试过。
方法二、通过设置遮罩层，当按钮被第一次点击的时候，弹出一个遮罩层遮挡按钮被再次点击，这种方法需要自己定义一个遮罩层，可通过一个data属性来控制是否显示，具体执行步骤和方法一类似。
方法三、不通过遮罩层和按钮disable属性，直接通过变量来控制是否执行事件，具体代码大致如下：
1、设置参数is_first_action为true
2、事件执行前设置is_first_action为false,然后执行事件时判断is_first_action是否为true,否则不执行
3、执行完初始化is_first_action为true
以上三种方法相同点都是通过data属性来判断是非是第一次执行，不同点在于界面展示，其中第一种可能只适合按钮，而第二种和第三种方法适合图片或者文字触发的事件。
还有一种特别的重复触发情况时，当按钮需要定义单击、双击和长按事件时，单击、双击和长按是三种不同的事件，虽然小程序通过两个事件参数执行不同事件，但是有个BUG就是当双击和长按的时候都会触发单击事件。如何解决这个问题可参考创新互联的文章《微信小程序点击事件重复触发如何解决》
微信小程序发布一年多以来，说实话，BUG还是挺多的，不过修补也很积极，经常深更半夜更新新的功能或者修复BUG，这点还是值得学习的。

网页名称：微信小程序如何避免按钮多次点击重复触发事件
浏览地址：https://www.cdcxhl.com/news39/242589.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有微信小程序等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联