Vue mouseup and mousedown event not functioning as anticipated

I am experiencing an issue with my code where the button is supposed to be disabled on mousedown event and enabled back on mouseup event. However, for some reason, the button does not get enabled on mouseup event.

Here's the snippet of my code:

new Vue({
  el: "#app",
  data: {
    clicked: false
  },
  methods: {
    toggle(type) {
      if (type === "down") {
          this.clicked = true
      } else {
          this.clicked = false // The issue arises here as mouseup event doesn't work as expected
      }
    }
  }
})
<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>

javascriptvue.js

Answer №1

When a button is inactive, it will not trigger the event when clicked.

An inactive button is not functional and cannot be clicked.

To overcome this issue, you can replicate the appearance of a disabled button using CSS along with custom logic inside the toggle() function.

Answer №2

Kindly review my sample.

If the button is disabled, mouseover functionality will also be disabled. You can use the class 'disabled' and add an extra method when the button is clicked.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could someone please explain why my ajax is not functioning properly?

I have been working on an AJAX function to pass input values from one page to another. However, I am facing a challenge where the value is not being passed as expected after redirection. Despite my efforts, I cannot figure out why it's not functionin ...

javascriptjqueryhtmlajax

Show the value of a session variable without needing to reload the page

Within an ajax file, I am setting a session variable like this: $_SESSION['id_essai']=$ligne[1];. This variable's value should change each time the form is submitted. Without refreshing the page, I am trying to retrieve the value of this va ...

javascriptphpsession

Issue with JQuery click() not triggering on a specific div button

I am attempting to replicate a user's click on a website where I have no control over the code. The specific element I am trying to interact with is a div that functions as a button. <div role="button" class="c-T-S a-b a-b-B a-b-Ma oU v2" aria-dis ...

javascriptjqueryhtmlcsssimulation

Check your jQuery regex to see if a variable starts with another

Is it possible to check if a variable starts with another one? For example, checking if Var1 starts with Var2 let regex = '^'+var1+'i'; if(regex.match(var2)){ return true } This code snippet always fails to return true. Thank you in ...

javascriptjquery

Effortless integration of jQuery with Google Maps autocomplete feature

I've successfully implemented Google Maps Autocomplete on multiple input tags like the one below: <input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" /> To enable Google Maps au ...

javascriptjquerygoogle-maps-api-3

Is there a more efficient method to display and conceal multiple div elements with jQuery?

I am looking for an alternative method to use jQuery to show and hide divs. This code is specifically for testing purposes and includes a large number of divs that will make the code quite long once all are added. HTML Code <!DOCTYPE html> <html ...

javascripthtmljquery

ajax: ensure utf-8 encoding is applied

I am facing an issue with my webpage that is saved in UTF-8 encoding. In the head section of the HTML document, I have defined it as follows: <meta charset="utf-8" /> Within an external JavaScript file, there is a function called ajax_db() which ma ...

phpjavascriptajaxutf-8

Adjust the height setting of the React-Highcharts viewport

My initial configuration for highcharts looks like this:- function getInitialHighChartsConfig(chartType) { return { credits: false, chart: { type: chartType, height: 325, }, title: { text: '', useHTML: tr ...

javascriptreactjshighcharts

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

javascriptangularjsangulartypescript

The value of a Vue custom v-model does not update correctly after retrieving it from an axios get request

I developed a custom component named "TextInput": <template> <q-input v-model="content" @input="handleInput" color="secondary" :float-label="floatLabel" /> </template> <script> import { QInp ...

laravel-5vue.jsvuejs2vue-componentaxios

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

I'm currently working on a GoDaddy website using a template that doesn't clearly highlight the SEND button in a Contact Us form. In order to comply with WCAG accessibility standards, active elements must have visible focus indicators. However, si ...

javascriptjquerycssinline-styleswcag2.0

What is the reason that when the allowfullscreen attribute of an iframe is set, it doesn't appear to be retained?

Within my code, I am configuring the allowfullscreen attribute for an iframe enclosed in SkyLight, which is a npm module designed for modal views in react.js <SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog"> <if ...

javascriptiframereactjs

Why does the removeChild method in JavaScript consistently remove the last child element, rather than the one specified by its ID?

There are four divs with an event listener onclick, triggering a JavaScript function that simply removes the clicked div: this.parentNode.removeChild(this); Although it should remove the specific div clicked on, it instead deletes the last child and alte ...

javascriptdomremovechild

How can Conditional Rendering be applied within List Rendering (v-for) in Vue JS?

In my current project, I am utilizing List Rendering (v-for) to display information about various books stored in an array. One challenge I'm facing is implementing conditional rendering within this loop to dynamically generate li elements that repre ...

javascriptvue.jsvuejs2

What sets apart async.map from the async library and Promise.map from bluebird?

Allow me to clarify: My goal is to utilize async/await functionality with either the async or bluebird library. I'm puzzled as to why this code snippet works as expected: const promises = Promise.map (someArray, async item => { ...

javascriptnode.jsasync-awaitbluebirdasync.js

Continuously generate new objects every second

I am working on a function that involves adding the RandomBlock object to the scene and then moving it downward on the screen. function enemyPaddleMovement() { scene.add(RandomBlock); RandomBlock.translateX(-8); } The RandomBlock object is created using ...

javascriptthree.js

5 Creative Techniques for Manipulating Boolean Variables in If Statements

I am receiving a unique custom header value and the values I am getting are accurate. The expected values include: true, false, undefined. However, the response associated with the value: false is incorrect. Code Snippet let deviceStatus = req.headers[ ...

javascriptnode.js

<select> dropdown menu for selecting specific files opened by JavaScript

Currently, I am converting CSV files into JSON format and then manipulating them to generate arrays that will be used by jQuery to create a graph. My goal is to implement a dropdown menu that allows the user to choose a specific CSV file for graph creatio ...

javascriptjqueryhtmljquery-selectors

Enhanced form validation using AJAX

Currently, my aim is to implement client-side validation with AJAX in order to check for any empty fields within a basic form. If a field happens to be blank, I intend to alert the user about its invalidity. It is crucial that the form does not get submitt ...

javascriptjqueryajaxvalidation

Using Froala events in Angular 2: A guide

Currently, I am incorporating Froala into my Angular 2 project. I have managed to upload an image successfully but am encountering issues triggering the image.uploaded event. The Froala document provides an example of how the event should be implemented: ...

javascriptangularfroala