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 http://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event — Gopinath Shiva, Apr 13 '17 at 05:49

loelsonk · Accepted Answer · 2017-04-13T07:54:05.110

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 '17 at 07:54

answered Apr 13 '17 at 05:51

loelsonk

3,570
2
16
23

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. – Holothrasher Apr 13 '17 at 06:05
I see, you are using strict mode. I've updated my answer, should be working now. I was missing `var`. – loelsonk Apr 13 '17 at 06:07
Now on line 1 it is saying "Unknown identifier: document". – Holothrasher Apr 13 '17 at 06:13
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? – Holothrasher Apr 13 '17 at 06:37
Never heard of it, but running this piece of code alone won't solve the problem? `onEvent("image2", "dblclick", function(event) { console.log("click"); });` – loelsonk Apr 13 '17 at 07:03
It does not solve the problem. What I am trying to do is have an element that activates and performs an action when I click, but also have that same element activate and perform a different action when I double click. If that makes any sense. – Holothrasher Apr 13 '17 at 07:16
I have read through the documentation of onEvent before though. – Holothrasher Apr 13 '17 at 07:17
Yes it does, is there a playground so I can test the code? – loelsonk Apr 13 '17 at 07:22
https://studio.code.org/projects/applab/Wd2KBBM1FnnByFABb_OIIncvmfWwZxoecqy7uGdlCEI/edit – Holothrasher Apr 13 '17 at 07:27
It does require an account, I can test any code given if that helps. I will link the documentation to everything that we can use. – Holothrasher Apr 13 '17 at 07:27
https://docs.code.org/applab/ this is all the documentation of everything that we can use. – Holothrasher Apr 13 '17 at 07:35
Do I include the first 2 lines? I get the same problem from before if I do. "Unknown identifier: document" – Holothrasher Apr 13 '17 at 07:53
I've updated the code, look at it now, you need to add `clicks()` function I prepared for you. It detecs if you clicked once or twice, based on `setTimeout()`. – loelsonk Apr 13 '17 at 07:55
@Holothrasher You don't need to pass two first lines. – loelsonk Apr 13 '17 at 08:00
Anyway you need to implement `clicks()` function. If it helped you mark this question as answered, so other people can see it. – loelsonk Apr 13 '17 at 08:06
THIS WORKS!!!! Thank you so much, I was trying to get this to work for days, and couldn't get it. Thank you so much!! – Holothrasher Apr 13 '17 at 08:11
Glad I could help you :) – loelsonk Apr 13 '17 at 08:13

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

1 Answers1