Single click and Double click on the same element, not working; Javascript

Question

I am trying to add a click function that triggers when a button is clicked. I am also trying to figure out how to add a double click function onto the same element, that triggers a different event.

var click = false;
onEvent("image2", "click", function(event) {
  click = true;
});
if (click === true) {
  setTimeout(function() {
    onEvent("image2", "click", function(event) {
      setScreen("safeScreen");
      console.log("double click");
    });
  }, 200);
} else {
  onEvent("image2", "dblclick", function(event) {
    setScreen("safeScreen");
    console.log("click");
  });
}

This code is completely wrong, but I don't know where to start/correct. What am I doing wrong? I am looking to have the single click not trigger when the user double clicks.

Not sure what your problem really is. Use Javascript addEventListeners suchas 'click' for single click and 'dblclick' for double click. Additional reference stackoverflow.com/questions/5497073/… — Gopinath Shiva
– Gopinath Shiva, Commented Apr 13, 2017 at 5:49

loelsonk · Accepted Answer · 2017-04-13 07:54:05Z

4

Update:

Try passing a function clicks() to your event listener like so:

onEvent("image2", "click", clicks);

Function clicks() will check if there was a single or double click based on setTimeout function. You can adjust setTimeout via timeout variable and of course you need clickCount variable declared outside clicks() function.

Pure js approach

Try adding two event listeners. Less code, much cleaner. Check this working example.

var selector = document.getElementById('codeorg');
selector.addEventListener('click', clicks);


// Global Scope variable we need this
var clickCount = 0;
// Our Timeout, modify it if you need
var timeout = 500;
// Copy this function and it should work
function clicks() {
  // We modify clickCount variable here to check how many clicks there was
  
      clickCount++;
      if (clickCount == 1) {
        setTimeout(function(){
          if(clickCount == 1) {
            console.log('singleClick');
            // Single click code, or invoke a function 
          } else {
            console.log('double click');
            // Double click code, or invoke a function 
          }
          clickCount = 0;
        }, timeout || 300);
      }
}



// Not important for your needs - pure JS stuff
var button = document.getElementById('button');

button.addEventListener('click', singleClick);
button.addEventListener('dblclick', doubleClick);

function singleClick() {
  //console.log('single click');
}

function doubleClick() {
  console.log('double click');
}

#codeorg {
  margin-bottom: 100px;
}

<h2>Double Click</h2>

<button id="button">Click me</button>


<hr><hr>


<h2>Double click or Single Click</h2>

<button id="codeorg">Click me</button>

edited Apr 13, 2017 at 7:54

answered Apr 13, 2017 at 5:51

loelsonk

3,6082 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Holothrasher Over a year ago

For some reason the coding environment that I am using is saying: "Error: line 4: TypeError: undefined is not a function". It is giving me this error after trying to test your code in my coding environment.

loelsonk Over a year ago

I see, you are using strict mode. I've updated my answer, should be working now. I was missing var.

Holothrasher Over a year ago

Now on line 1 it is saying "Unknown identifier: document".

Holothrasher Over a year ago

The coding environment that we are required to use is weird and seems to restrict a lot functions from javascript. Are you familiar with code.org?

loelsonk Over a year ago

Never heard of it, but running this piece of code alone won't solve the problem? onEvent("image2", "dblclick", function(event) { console.log("click"); });

|

Collectives™ on Stack Overflow

Single click and Double click on the same element, not working; Javascript

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related