Trigger an event when clicking a disabled button

Question

Is there a way to trigger this particular function when clicking a disabled button? Then trigger another function when the button is enabled?

I tried to do a hack like this but it did not work

<template>
  <b-form @submit.prevent="game">
    <b-row
      class="mt-4"
      v-on:click="invalid ? hello : ''"
    >
      <b-button
        class="auth-button"
        pill
        :disabled="invalid"
        type="submit"
      >
        重置密碼
      </b-button>
    </b-row>
  </b-form>
</template>

<script>
  data: function() {
    return {
      invalid: true
    };
  },
  methods: {
    hello() {
      alert('Hello World')
    }
    game() {
      alert('Game Over')
    }
  }
</script>

Answer 1

There is no way to capture a click on disabled elements. Your best bet is to react to a specific class on the element.

HTML Markup:

<input type="button" class="disabled" value="click" />

JavaScript code:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});