js全局配置 避免button按钮快速点击

前沿:在项目中的一些按钮经常会绑定事件,在用户的操作过程当中快速点击时,会连续执行这些方法。我们可以通过禁止点击disabled来限制点击,但是每个按钮上加判断过于繁琐,因此就针对这个问题找到一些全局的配置方法。

1.针对vue项目

发现了一个比较奇怪的现象:vue的@click绑定点击事件 和 js原生的addEventListener 事件不冲突。vue的@click事件优先都能执行(jq项目就不行)。
因此可以全局配置一个自定义指令,在其插入dom时addEventListener 绑定点击事件,可以控制时间,在一定的时间呢不允许重复。

Vue.directive("btnClick", {
  // 插入dom 时做的事情
  inserted: function(el, bind) {
      el.addEventListener("click", () => {
          el.disabled = true;
          setTimeout(()=>{
            el.disabled = false;
          },500)
      });
  }
});
使用:在button 按钮上v-btnClick(div,a,p等非按钮元素无效)

2.针对jquery项目

经尝试是无法给同一个元素同时绑定 2次click事件的,因此。可以在全局重新封装他的click事件,思路上其实是一样的,主要是提供一个全局的方法

function click(name,fn){
	$('body').on("click",name,function(){
		// 封装click方法 控制多次点击
		this.disabled=true;
		setTimeout(()=>{
			this.disabled = false;
		 },500)
		fn(this)		//回调函数
	})
}

click('.button',function(my){
	console.log("1111")
	
})
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值