Add double click event

Question

I implemented spectrum color picker, and I am trying to add a double click event to the palettes. (The one that has the predefined colors, the class name is: sp-thumb-el.) I added the following code after line 476:

paletteContainer.on("dblclick", ".sp-thumb-el", function (){
    console.log("you Double Clicked");
});

And nothing happens when I double click. What am I doing wrong and how can I fix it?

Line 479 in JSFiddle

there is no error with your code , you have paletteContainer defined wrong , or you have a typo in sp-thumb-el class. This code would work otherwise. One thing you can check is the jquery version and make sure it is after .on() was added — Scott Selby, Dec 09 '15 at 07:35
It seems, the element you're trying to bind already has a single-click bound to it. So, if you try binding double click, it will just execue the single click twice. You may refer to this thread to make both of them work: http://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately — ShivangiBilora, Dec 09 '15 at 07:37

score 0 · Answer 1 · answered Dec 09 '15 at 07:31

0

I think you want to do something like this.

$("#btn").dblclick(function(){

  console.log("working fine");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" > double click it </button>

answered Dec 09 '15 at 07:31

Shubham

1,755
3
17
33

1

this is not the way the OP wanted , the example was using .on() – Scott Selby Dec 09 '15 at 07:35

score 0 · Answer 2 · answered Dec 09 '15 at 07:45

0

It seems you were missing https://bgrins.github.io/spectrum/spectrum.js.
Also, You need to remove your spectrum.css link and add the correct https version at https://bgrins.github.io/spectrum/spectrum.css

View the updated version @ https://jsfiddle.net/f72tscdj/

Hope this helps, Sean

answered Dec 09 '15 at 07:45

Meghan

1,215
11
17

I don't think this is an answer. I think it should be a comment. Also, The spectrum.js is there. It's in the javascript section of the code. – Horay Dec 09 '15 at 16:35

score 0 · Accepted Answer · answered Dec 09 '15 at 07:48

0

With respect to the comment I made above, you might want to try a hack like this:

       paletteContainer.on("click", ".sp-thumb-el", function (e){
            e.preventDefault();
            e.stopImmediatePropagation();
                            clicks++;
           if(clicks===2){
             console.log("you Double Clicked");
             clicks=0;
           } 
        });

The same is updated in your plunkr too..

answered Dec 09 '15 at 07:48

ShivangiBilora

2,912
4
20
27

Thanks for the answer! I tired your JSFiddle you created, and it doesn't fully work. If you click once, then click again, (not 2 in a row necessarily,) then it thinks it was a double click. – Horay Dec 10 '15 at 05:36

Add double click event

3 Answers3