添加双击事件答案

【问题标题】：Add double click event添加双击事件
【发布时间】：2015-12-09 07:27:48
【问题描述】：

我实现了spectrum color picker，我正在尝试向调色板添加双击事件。（具有预定义颜色的类名是：sp-thumb-el。）我在line 476之后添加了以下代码：

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

当我双击时没有任何反应。我做错了什么，我该如何解决？

Line 479 in JSFiddle

【问题讨论】：

您的代码没有错误，您的调色板容器定义错误，或者您在 sp-thumb-el 类中有错字。否则，此代码将起作用。您可以检查的一件事是 jquery 版本并确保它是在添加 .on() 之后
看来，您尝试绑定的元素已经绑定了单击。所以，如果你尝试绑定双击，它只会执行两次单击。您可以参考此线程以使它们都起作用：stackoverflow.com/questions/6330431/…

标签： javascript jquery spectrumjs

【解决方案1】：

关于我上面的评论，您可能想尝试这样的破解：

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

您的 plunkr 中也会更新相同的内容..

【讨论】：

感谢您的回答！我厌倦了您创建的 JSFiddle，但它并不能完全正常工作。如果您单击一次，然后再次单击，（不一定是连续单击 2 次），那么它认为这是一次双击。

【解决方案2】：

我想你想做这样的事情。

$("#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>

【讨论】：

这不是 OP 想要的方式，示例使用的是 .on()

【解决方案3】：

您似乎错过了https://bgrins.github.io/spectrum/spectrum.js。
此外，您需要删除您的 spectrum.css 链接并在 https://bgrins.github.io/spectrum/spectrum.css

添加正确的 https 版本

查看更新版本@https://jsfiddle.net/f72tscdj/

希望这会有所帮助，肖恩

【讨论】：

我不认为这是一个答案。我认为这应该是一个评论。此外，spectrum.js 也在那里。它位于代码的 javascript 部分。