Double click and single click on same element in Vue.js

I want to implement something like instagram does on photos. When the user clicks on the photo the app opens the current post, but when the user double clicks on the photo it triggers a like.

    <a :href="'p/'+ post.id" >
          <img class="card-img-top w-100"  :src="post.image_path" />
    </a>

if I do it like this

   <a @dblclick="likeThePost(post.id)"  :href="'p/'+ post.id" >
          <img class="card-img-top w-100" :src="post.image_path" />
        </a>

it opens the post and triggers the like in the same time

Sti3bas

6 years ago

Best Answer

Level 53

<a @click.prevent="onClick(post.id)">
   <img class="card-img-top w-100" :src="post.image_path" />
</a>

data() {
   return {
      //...
      counter: 0
   };
},
methods: {
   onClick(postId) {
      this.counter++;
      
      if(this.counter == 1) {
         this.timer = setTimeout(() => {
            this.counter = 0;
            window.location.href = 'p/'+ postId;
         }, 300);

         return;
      }
      
      clearTimeout(this.timer);  
      this.counter = 0;
      this.likeThePost(postId);
   }
},

https://stackoverflow.com/a/41309853

Please or to participate in this conversation.