CODEWITHSUNDEEP
javascriptvue.js
Axel
Axel

Reputation: 5111

Vue mouseup and mousedown event doesn't work as expected

I have a following code which basically disables the button on mousedown event and enables it back again on mouseup event. However, the mouseup event doesn't enable the button for some reason.

Here's a code snippet:

new Vue({
  el: "#app",
  data: {
    clicked: false
  },
  methods: {
    toggle(type) {
      if (type === "down") {
          this.clicked = true
      } else {
          this.clicked = false // Mouseup event doesn't reach here
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button
      @mouseup="toggle('up')"
      @mousedown="toggle('down')"
      :disabled="clicked"
  >Button</button>
</div>

Upvotes: 1

Views: 4784

Answers (2)

FightInGlory
FightInGlory

Reputation: 448

Please check my example.

When button will have disabled mouseover will be disabled. You can add class disabled and add additional method on button click.

new Vue({
  el: "#app",
  data: {
    clicked: false
  },
  computed: {
    getDisabledClass() {
      return {
        'disabled': this.clicked
      }
    }
  },
  methods: {
    toggle(type) {
      if (type === "down") {
          this.clicked = true
      } else {
          this.clicked = false // Mouseup event doesn't reach here
      }
    },
    onClick() {
      //your logic here
    }
  }
})
.disabled {
opacity: .5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button
      @mouseover="toggle('up')"
      @mouseleave="toggle('down')"
      @click.prevent="onClick()"
      :class="getDisabledClass"
  >Button</button>
</div>

Upvotes: 1

Raffobaffo
Raffobaffo

Reputation: 2856

When a button is disabled it does not fire the event on mousedown.

A disabled button is unusable and un-clickable.

To avoid this problem, you can simulate the "disabled" state of the button by using css and your custom logic inside toggle()

Upvotes: 1

Related Questions