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

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“ capture”标志，没有任何运气。

---

目前，我得到了以下解决方案：

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>

Answer 1

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

我不认为可以从指令中执行任何操作，因为您通过绑定@click到按钮显式添加了另一个侦听器。

Answer 2

您可以使用：

event.target.preventDefault();

我不确定为什么要这样做，因为您添加点击侦听器是有原因的。

也许你可以进一步澄清你的问题。