title: How do I use v-on="$listeners" except for @click?
body: <p>I have a <code>Button.vue</code> looks like this. I'm using <code>v-on=&quot;$listeners&quot;</code> to pass all listeners to <code>&lt;a&gt;</code>.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;a
          v-bind=&quot;$attrs&quot;
          v-on=&quot;$listeners&quot;
          class=&quot;Button&quot;
          href=&quot;javascript: void(0)&quot;
          :class=&quot;{ disabled }&quot;
          @click=&quot;onClick()&quot;
      &gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/a&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: {
              disabled: {
                  type: Boolean,
                  default: false
              }
          },
          methods: {
              onClick() {
                  if (!this.disabled) {
                      this.$emit('click');
                  }
              }
          },
      };
  &lt;/script&gt;
  </code></pre>
  <p>But I need a custom check before propagating the <code>@click</code> event, so I also defined <code>@click</code>.
  But when I define both <code>v-on=&quot;$listeners&quot;</code> and <code>@click=&quot;onClick()&quot;</code> at the same time, the <code>onClickDelete</code> function get called twice. I also tried <code>@click.prevent</code>, but still doesn't work.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Button @click=&quot;onClickDelete&quot;&gt;Delete&lt;/Button&gt;
  </code></pre>
  <p>Is there a way I can define <code>v-on=&quot;$listeners&quot;</code> for all the events except <code>@click</code>?</p>
  <p>Here's the <a href="https://codesandbox.io/s/intelligent-albattani-43elt?file=/src/App.vue" rel="nofollow noreferrer">code sandbox</a>.</p>