Making double clicks act as two simple clicks in Javascript

Question

I have some elements in my webpage that are clickable. When you click on them they, let's say, change their background color. Every time you click they get a different color. They are initially gray, then blue, then yellow then orange and back to gray and so on...

Now the problem is that all of this is implemented on single clicks, but I would like my double clicks to act as two single clicks and not fire a double click event (which does select the word etc...)

Let's imagine we have the following sentence

<p>This is my <span id="elem_1" className="color_1"> element </span></p>

And this is my js code:

var totalNbOfClicks = 0
var elem document.getElementbyId("elem_1")
elem.onclick = function () {
   totalNbOfClicks +=1
   totalNbOfClicks = totalNbOfClicks%4
   elem.className = "elem_"+totalNbOfClicks
}
elem.ondblclick = function(evt) {
   ClearSelection();
   evt.preventDefault()
}

function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

Now I use the ClearSelection function detailed in this answer on my double click.

I would like to somehow find a way to fire 2 single click events on a double click, but I haven't found anything that could help on SO from already asked questions.

Edit: thanks to @VLAZ's comment, I have been able to find that the problem could originate from this extra thing:

I have some extra thing that I want to do when the text get selected so I have added a

elem.onMouseUp(e){

   //Do some stuff here with the selection e.g.,
   var sel = window.getSelection()
   selectedText = sel.toString();
   var range = window.getSelection().getRangeAt(0);
   console.log(selectedText)
   console.dir(range)
}

Now if I had e.preventDefault() to elem.onMouseUp(e), I get the intended behaviour, but that's not an option for me.

It does not. It does a simple click and a double click @VLAZ — LBes, Sep 13 '19 at 16:18
[When I double click I do get two click events being fired](https://jsbin.com/qofibilado/1/edit?html,js,console,output). So I can't reproduce the double click behaviour overriding two clicks. — VLAZ, Sep 13 '19 at 16:28
@VLAZ you are right, I have narrowed down where the problem is coming from. Check my edit please — LBes, Sep 13 '19 at 17:00

Pranav · Accepted Answer · 2019-09-14T10:23:33.417

var totalNbOfClicks = 0
var elem = document.getElementById("elem_1")
elem.onclick = function () {
   totalNbOfClicks +=1;
   console.log("total", totalNbOfClicks);
   totalNbOfClicks = totalNbOfClicks%4;
   elem.className = "elem_"+totalNbOfClicks;
}
elem.ondblclick = function () {
  for(var i=0; i<=2; i++){ 
  totalNbOfClicks +=1;
   console.log("total", totalNbOfClicks);
   totalNbOfClicks = totalNbOfClicks%4;
   elem.className = "elem_"+totalNbOfClicks;
}}


function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p>This is my <span id="elem_1" className="color_1"> element </span></p>
</body>
</html>

This will result when you double click on it... It is returning two single events on double click, CSS disables text selection. Hope its clear.

Probably the answer to what you asked... just used ``` ondblclick ``` event — Pranav, Sep 13 '19 at 16:51
(what a lovely username :)) Thanks to VLAZ's comments, I have updated my question. See the edit please. Still upvoted because it's a good answer to the initial problem :) — LBes, Sep 13 '19 at 17:01

Making double clicks act as two simple clicks in Javascript

1 Answers1