前沿:在项目中的一些按钮经常会绑定事件,在用户的操作过程当中快速点击时,会连续执行这些方法。我们可以通过禁止点击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")
})