title: How to prevent/stop propagation of default event (click) in directive (vue 2.x)
body: <pre><code>Vue.directive('login-to-click', {
    bind (el) {
      const clickHandler = (event) =&gt; {
        event.preventDefault()
        event.stopImmediatePropagation()
        alert('click')
      }
      el.addEventListener('click', clickHandler, true)
    }
  })
  </code></pre>
  
  <p>usage</p>
  
  <pre><code>&lt;button @click="handleClick" v-login-to-click&gt;CLICK&lt;/button&gt;
  </code></pre>
  
  <p><code>handleClick</code> is always triggered. How I can prevent that from directive? Tried with/without addEventListener "capture" flag without any luck.</p>
  
  <hr>
  
  <p>For now I ended up with following solution:</p>
  
  <pre><code>Vue.prototype.$checkAuth = function (handler, ...args) {
    const isLoggedIn = store.getters['session/isLoggedIn']
    if (isLoggedIn) {
      return handler.apply(this, args)
    } else {
      router.push('/login')
    }
  }
  </code></pre>
  
  <p>And then in component</p>
  
  <pre><code>&lt;button @click="$checkAuth(handleClick)"&gt;CLICK&lt;/button&gt;
  </code></pre>