Is there a way to implement "click", "double click" and "click and hold" to work on the same element?

Question

I want to realize something like the click on Posts in Instagram on Android (I think on iOS it should be the same functionality). In Instagram, if someone clicks on a photo, it opens, double click, it gets liked and click and hold opens a Popup with that image and some text/buttons. Instagram does this only in the Native App, not in their PWA, but I want to realize a function like that in my PWA.

[not tried, because I hope to find an "official" way]: I think, it should be possible with mousedown mouseup and a custom function to count the seconds.

But is that realy the "perfect" way?

score 1 · Answer 1 · answered Aug 08 '19 at 08:49

Clik and hold

Please Refer the below post, It will open the menu, if click and hold some time. Click and Hold event listener with Javascript

Double click

<p ondblclick="myFunction()">Double-click me</p> https://www.w3schools.com/jsref/event_ondblclick.asp

see the below example, I added double click and click & hold

 function doubleClickFunction(){
    $('.hold_trigger').css({'border':'1px solid red'});
  }
var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

hold_menu.hide();

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

function menu_toggle() {
  hold_menu.toggle();
}

ul.hold_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.hold_menu a, div.hold_trigger  {
   display: inline-block;
   padding: 5px 15px;
   border: 1px solid #ccc;
   width: 300px;
}

ul.hold_menu a:link, ul.hold_menu a:visited {
   color: black;
   text-decoration: none;
}

ul.hold_menu a:active, ul.hold_menu a:hover {
   background: #ff0;
   text-decoration: none;
}

div.hold_trigger {
   color: black;
   cursor: pointer;
}

div.hold_trigger:hover {
   background: #ccc;
}

 <div class="hold_trigger" ondblclick="doubleClickFunction()">Click and hold to toggle the menu</div>
  <ul class="hold_menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li><a href="#">Option 3</a></li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Working solution, but I searched something vuejs related. Best would be for Nuxtjs.... But thank you. — Jakob Kühne, Aug 08 '19 at 15:59

score 0 · Answer 2 · answered Aug 08 '19 at 08:44

0

Javascript has click and dblclick events. But is not good to use both in a single element because it will trigger both events.

Here is an implementation of double click in javascript as you mentioned.

answered Aug 08 '19 at 08:44

PaulShovan

2,140
1
13
22

score 0 · Accepted Answer · answered Sep 12 '19 at 13:19

I then solved it via https://www.npmjs.com/package/vue2-touch-events for VueJS. Simple query when the element is pressed (start) and when the pressure stops and count the time in between. If this is over x seconds, then a popup pops up, if you let go without reaching the seconds, then a normal click is executed.

Is there a way to implement "click", "double click" and "click and hold" to work on the same element?

3 Answers3