Detect both single and double click events on a single Vue component with precision

I did some online research but couldn't find a clear answer. However, I came across this article ->

Since I didn't quite understand the solution provided, I decided to come up with my own inspired by it.

 detectClick() {
  this.clickCount += 1;
  if (this.clickCount === 1) {
    var singleClick = setTimeout(() => {
      console.log("we are in singleClick");
      this.currentPickerDate();
      this.clickCount = 0;
    }, 500);
  }
  if (this.clickCount === 2) {
    console.log("we are in double Click");
    clearTimeout(singleClick);
    this.showEvent();
    this.clickCount = 0;
  }
}

Here is the component:

<v-date-picker
    v-model="date"
    @click:date="detectClick"
    :events="allEvents"
    :picker-date.sync="pickerDate"
    event-color="red lighten-2">
</v-date-picker>

I don't believe currentPickerFunction is necessary, but let me know if you think otherwise. I'm having trouble with the setTimeout function in the detectClick function, and any better solutions would be appreciated. Thanks!

I am using vue 2 and vuetify

Answer №1

@hover - hovering over an element

@scroll - scrolling on a page

Note: Apologies for the confusion earlier, I misunderstood the inquiry

Answer №2

Since var singleClick is defined within the first if clause, it carries a block scope that restricts access from the second if clause. For singleClick to be accessible in both clauses, it should be defined in global scope. If you refer to the provided link, you'll notice that clickTimer: null is established within the data() function:

data () {
   return {
      clickCount: 0,
      clickTimer: null
   };
},

For more information on JavaScript scope, visit this link.

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

Unable to save object in JavaScript memory

Currently, I am in the process of implementing a Stack in JavaScript using a LinkedList. However, I encountered an issue when trying to instantiate a Node class. When attempting to create a variable let newNode = new Node(x), I am receiving undefined. I a ...

Using AngularJS in conjunction with other scripts

I am currently working on an application and now I have the task of implementing a dynamic menu using AngularJS. This requires me to modify variables in the AngularJS application from my existing code. Here is the example I am experimenting with: <scr ...

Use $parse to extract the field names that include the dot character

Suppose I have an object with a field that contains a dot character, and I want to parse it using $parse. For instance, the following code currently logs undefined - var getter = $parse('IhaveDot.here'); var context = {"IhaveDot.here": 'Th ...

What is the best way to use ajax for uploading multiple images at once?

I'm having trouble uploading multiple image files. Can someone please review my code? <form id="fileupload" method="POST" enctype="multipart/form-data"> <input type="file" name="files[]" multiple="multiple" id="images_input"> & ...

Vue.js - Inability to calculate component height and width

Here is the code snippet that I am using within my component: computed: { gridWidth() { return (this.$el && this.$el.offsetWidth) }, gridHeight() { return (this.$el && this.$el.offsetHeight) }, }, mounted(){ console.log(this.$ ...

Explore one of the elements within a tuple

Can we simplify mapping a tuple element in TypeScript? I'm seeking an elegant way to abstract the following task const arr: [string, string][] = [['a', 'b'], ['c', 'd'], ['e', 'f']] const f ...

Passing a Javascript variable to the NAME attribute of an HTML <a href> tag: Steps to do it efficiently

I need assistance with passing a JavaScript variable to the NAME attribute of an HTML tag. Let's consider this script example: <script> var name = "Click here!"; </script> My goal is to pass the variable to some code in order for <a ...

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

Delivering XML in response to a webmethod call

While working with an ajax PageMethod to call an asp.net webmethod, I encountered an issue when trying to pass a significant amount of XML back to a callback javascript function. Currently, I am converting the XML into a string and passing it in that form ...

Vue.js - finding the route path using its name in Vue.js

Currently, I have a vcard that links to a specific route. In the code snippet below, I have used the route name and passed parameters to it successfully. However, I am facing an issue where I need to use the same link in another location and pass it as a ...

Receiving a JSON response from express.js via a jQuery get request is not functioning as expected

My goal is to send a JSON value from the back end to the front end of my application. Currently, I am using express.js and all post methods are working perfectly. When a button is clicked in the front-end of my application, I want to receive an invoice nu ...

Nested pages are causing jQuery plugins to malfunction

I am currently working on a website, but I am facing some issues with the product listing pages and the tips and tricks page. It appears that there is an issue with jMenu and jFlipBook plugins not functioning properly. Since I didn't develop the origi ...

Tips for retaining JWT token in local storage even after a page refresh

I am currently working on implementing a login/logout feature and utilizing the context API to manage functions such as storing tokens in local storage and removing them upon logging out. However, I have encountered an issue where the token stored in local ...

How can I locate and substitute a specific script line in the header using Jquery?

I need to update an outdated version of JQuery that I have no control over, as it's managed externally through a CMS and I can't make changes to it. But I want to switch to a newer version of JQuery. Here is the old code: <script type="text/ ...

Put a cookie in place to deter users from returning to the website

Looking for a way to prevent access to my contest site once the form has been submitted. Is there a way to achieve this? Thanks in advance ...

The findOneAndUpdate function in MongoDB is adding a new record into the database

Whenever I make an update API call, I just need to update the serviceActiveFlag status. After the update API call, a new document with an empty vehicle array is created, as shown below: _id:59c76073c11d3929148f500f vehicle:Array _v:0 The ID field will ov ...

When a value is entered into an input in Vue, automatically transition to the next field

As a newcomer to Vue, this is my first project using the framework. I have three input fields that start with empty values. Is there a way to automatically move or make the second input field selectable when the first input field contains more than 5 chara ...

Android Webview onLoad function provides incorrect height information

When I load a file:// URL into the webview, issues with height calculation arise. Instead of using WRAP_CONTENT, I calculate the height in javascript during the onPageFinished event in Android. However, about 2 out of 5 times, the javascript reports an inc ...

Safari is having trouble loading all the resources on the webpage

I'm encountering a strange issue with Safari when trying to open my web app. Here's the setup: I have a Vuejs application hosted in an S3 Bucket on AWS. The app is exposed through an API Gateway. The Problem: When I try to access the app, only ...

Uh-oh! Looks like there was an issue with the AJAX response: net::

CODE: FRONT-END $(document).ready(function(){ $('.delete-post').on('click', function(){ var id = $(this).data('id'); var section = $(this).data('section'); var url = &apo ...