vue项目全局防抖, 点击后移除按钮焦点

693 阅读1分钟

按钮防抖是个自古以来的老问题 以下可以解决所有vue的事件绑定防抖, 但是原生事件绑定不行,

// 全局点击防抖处理
const on = Vue.prototype.$on
Vue.prototype.$on = function (e, func) {
  // 目前只有点击需要防抖
  if (e === 'click') {
    let sto
    on.call(this, e, function () {
      sto ? clearTimeout(sto) : func.apply(this, arguments)
      sto = setTimeout(() => sto = undefined, 500)
      // 点击后移除焦点
      this.$el && this.$el.blur()
    })
  } else {
    on.call(this, e, func)
  }
}

点击后移除焦点是解决点击按钮后弹窗, 此时按回车或空格会继续触发按钮点击 造成不必要的困扰