title: How to prevent click event in link or button using Vue directive
body: <p>Hi I'm playing around with vue directives and I'm trying to prevent click event if the element is <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> tag. So my question is, is this possible to do using vue directive?</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;a 
      @click.stop.prevent="displayModal()"
      v-noclick="test"&gt;
      I'm a link
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>Vue directive</strong></p>
  
  <pre><code>Vue.directive('noclick', {
      bind( elem, binding, vnode ) {
  
          let user = {'name': 'John Doe'}
  
          if( user ) {
              let hasAccess = false
  
              if( !hasAccess ) {
                  if( elem.tagName === 'A' ) {
                      elem.addEventListener( 'click', ( event ) =&gt; {
                          //this should prevent the element on click event
                          //but not working
  
                          event.stopPropagation()
                          event.preventDefault()
                          event.stopImmediatePropagation()
                          return false
                      })
                      return true
                  }
              }
          }
      }
  }
  </code></pre>