如何防止/停止指令中默认事件（点击）的传播（vue 2.x）

Question

Vue.directive('login-to-click', {
  bind (el) {
    const clickHandler = (event) => {
      event.preventDefault()
      event.stopImmediatePropagation()
      alert('click')
    }
    el.addEventListener('click', clickHandler, true)
  }
})

用法

<button @click="handleClick" v-login-to-click>CLICK</button>

handleClick 总是被触发。我怎样才能阻止指令？尝试使用/不使用 addEventListener“捕获”标志但没有任何运气。

---

现在我最终得到了以下解决方案：

 Vue.prototype.$checkAuth = function (handler, ...args) {
  const isLoggedIn = store.getters['session/isLoggedIn']
  if (isLoggedIn) {
    return handler.apply(this, args)
  } else {
    router.push('/login')
  }
}

然后在组件中

<button @click="$checkAuth(handleClick)">CLICK</button>

原文由 user606521 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

据我了解，这是两个不同的事件处理程序，您只是在阻止指令中绑定的默认事件，这对 @click 但是，因为您没有覆盖点击侦听器，而是添加了一个第二个。如果您想阻止默认的@click 绑定，您可以使用 @click.prevent="handleClick" 。

我不认为有任何方法可以从指令中做到这一点，因为您通过将 @click 绑定到按钮来显式添加另一个侦听器。

原文由 Philip Feldmann 发布，翻译遵循 CC BY-SA 3.0 许可协议