How to prevent 'click' event to fire before 'dblclick' event

Question

I have to handle two events which are 'click' and 'dblclick' but the click event always fires before dblclick event and don't let dblclick event to execute. How can I make the event to execute correctly 'click' and 'dblclick'

google.maps.event.addListener(map, 'dblclick', function(event) {
   polygon(map, event.latLng)
 });


 google.maps.event.addListener(map, 'click', function(event) {
   click_events(map, event.latLng)
 });

set a variable which becomes true on click, but false on dbclick? or something like that — evolutionxbox, May 28 '19 at 15:02
Possible duplicate of [Jquery bind double click and single click separately](https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately) — skyline3000, May 28 '19 at 17:14

score 0 · Answer 1 · answered May 28 '19 at 15:04

0

var clicked = false;
google.maps.event.addListener(map, 'dblclick', function(event) {
   polygon(map, event.latLng);
   clicked = true;
 });


 google.maps.event.addListener(map, 'click', function(event) {
   if(clicked){
      click_events(map, event.latLng);
   }
 });

answered May 28 '19 at 15:04

Dorian Mazur

514
2
12

but this way I cant place a click event for the first time. I should doubleclick once to make the clicked variable true – Bre May 28 '19 at 15:05
Then use `setTimeout` function – Dorian Mazur May 28 '19 at 15:06
Please help me how – Bre May 28 '19 at 15:07

score 0 · Answer 2 · answered May 28 '19 at 15:24

Use setTimeout and maintain the timeout object so that you can clear it on double click

var timeoutObj;
var timeoutThreshhold = ...; //number of milliseconds to wait for double click

google.maps.event.addListener(map, 'dblclick', function(event) {
   if (timeoutObj) {
     clear timeoutObj;
   }
   polygon(map, event.latLng);
 });


 google.maps.event.addListener(map, 'click', function(event) {
   timeoutObj = setTimeout(function() {
     timeoutObj = null;
     click_events(map, event.latLng);
   }, timeoutThreadhold);
 });

I tried but for every doubleclick it executes the click event also after it. I want to be able to fire only one of them. on doubleclick or onclick — Bre, May 28 '19 at 15:44

score 0 · Answer 3 · answered May 28 '19 at 15:46

from https://api.jquery.com/dblclick/

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

how about handling it yourself, here an example for a multi-click detection:

let timeout, n = 0, delay = 250;

document.querySelector(".clicker").addEventListener("click", function(event) {
  ++n;
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    clickHandler.call(this, n, event);
    n = 0;
  }, delay);

  // a visual aid for how many times you've already clicked in this sequence
  event.target.textContent = n;
});

// just something visual
const cssNamedColors = ["Maroon","Red","Orange","Yellow","Olive","Green","Purple","Fuchsia","Lime","Teal","Aqua","Blue","Navy","Black","Gray","Silver","White"];
  
// decide what to do for *n* clicks:
function clickHandler(n, event) {
  event.target.style.background = cssNamedColors[n-1];
  event.target.textContent = n + " - " + cssNamedColors[n-1];
}

.clicker {
  display: block;
  background: #888;
  padding: 100px 0;
  text-align: center;
  font-size: 36px;
  color: white;
  cursor: pointer;
  text-shadow: -1px -1px 3px #000, 1px -1px 3px #000, -1px 1px 3px #000, 1px 1px 3px #000;
}

<div class="clicker">(Multi-)Click me</div>

How to prevent 'click' event to fire before 'dblclick' event

3 Answers3