Combining click and dbclick

Question

How I am supposed to combine the below ones into one single working script? When is clicked once a color picked-up by user appears,click again the color turns in white and when double-clicked appears aqua. It is too long code, I tried to combine them, but I made mistake.

//single click
$('#pixel_canvas').on('click', 'td', function () {
    var color = $('#colorPicker').val();
    if ($(this).hasClass("blank") == true) {
        $(this).css('background-color', color);
        $(this).removeClass('blank');
    }
    else {
        $(this).addClass('blank');
        $(this).css('background-color', 'white');
    }
});
//double click
$('#pixel_canvas').on('dblclick', 'td', function () {
    var color = $('#colorPicker').val();
    if ($(this).hasClass("blank") == true) {
        $(this).css('background-color', color);
        $(this).removeClass('blank');
    }
    else {
        $(this).addClass('blank');
        $(this).css('background-color', 'aqua');
    }
});

In general the `click` event executes before the `dblclick`. When double clicking 3 events get triggered, the `click` events is triggered twice and then the `dblclick`, `event.stopPropagation` and/or `return false` in the `click` event should fix that. — Nope, Jan 16 '18 at 09:43
Possible duplicate of [How to stop events bubbling in jQuery?](https://stackoverflow.com/questions/4522257/how-to-stop-events-bubbling-in-jquery) — Liam, Jan 16 '18 at 09:45

score 1 · Answer 1 · answered Jan 16 '18 at 10:06

I'd go something like this:

// Take your actual 'core' code and turn it into a jQuery function:
$.fn.setColor(colorOff){
    if( $(this).hasClass("blank") ){
        $(this)
            .css('background-color', $('#colorPicker').val())
            .removeClass('blank');
    } else{
        $(this)
            .addClass('blank')
            .css('background-color',colorOff);
    }
}

// Now bind the events to the element and pass the color needed for the events:
$('#pixel_canvas')
    .on('click','td',function(){
        $(this).setColor('white')
    })
    .on('dblclick','td',function(){
        $(this).setColor('aqua')
    });

I tried but did not work. I will try again to see what I did wrong. My knowledge are not so good, so I need some time — mrs68tm, Jan 16 '18 at 12:00

score 0 · Answer 2 · answered Jan 16 '18 at 10:13

This may help.

function doClickAction() {
   var color=$('#colorPicker').val();
   if($(this).hasClass("blank")==true){
     $(this).css('background-color',color);
     $(this).removeClass('blank');
   }
   else{
     $(this).addClass('blank');
     $(this).css('background-color','white');
   } 
}
function doDoubleClickAction() {
  var color=$('#colorPicker').val();
  if($(this).hasClass("blank")==true){
     $(this).css('background-color',color);
     $(this).removeClass('blank');
  }
  else{
     $(this).addClass('blank');
     $(this).css('background-color','aqua');
  }
}

var timer = 0;
var delay = 200;
var prevent = false;

$("#pixel_canvas")
  .on("click", function() {
    timer = setTimeout(function() {
      if (!prevent) {
        doClickAction();
      }
      prevent = false;
    }, delay);
  })
  .on("dblclick", function() {
    clearTimeout(timer);
    prevent = true;
    doDoubleClickAction();
  });

I need some time to understand it and to implement it. I am not so good as I want to be in this field. I will let you know about my work — mrs68tm, Jan 16 '18 at 12:03

Combining click and dbclick

2 Answers2