执行单击或双击。不是都答案

【问题标题】：execute either single click or double click . Not both执行单击或双击。不是都
【发布时间】：2014-10-03 08:14:01
【问题描述】：

我需要单击执行一个功能，双击执行另一个功能。我面临的问题是由于我们不能在没有先单击两次的情况下进行双击事件。我想，只要我们有双击，那么只有双击功能应该执行而不是单击功能。以下是我到目前为止所做的事情。请建议是否有更好的方法来做到这一点，因为下面的代码并不总是完美的。

HTML

<div class='box'>

JS：

var dblclick = false;

//single click function
$('div.box').on('click',function(){
    setTimeout(function(){
        if(!dblclick){
            console.log('singleClick');
        }
    },200); 
});

//resetting double click flag
$('div.box').on('click',function(){
    setTimeout(function(){
        dblclick = false;
    },400); 
});

//double click function
$('div.box').on('dblclick',function(){
    dblclick = true;
    console.log('doubleClick')
});

CSS：

div.box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
}

【问题讨论】：

从用户体验的角度来看，这听起来像是错误的做法。我试图想到一个应用程序在双击时会做完全不同的事情，但我做不到。如果有人将他们的双击速度设置为低或高怎么办？您假设超时中的双击速度可能是您的问题。也许如果您发布您想要实现的目标，您可能会得到一些替代解决方案。
假设我想在我的网站上放置一张图片，并要求访问者在图片的不同区域给出喜欢和不喜欢的 cmets。单击图像将打开一个带有绿色背景的框，他们可以在其中在单击的区域输入他们喜欢的内容。双击会打开一个红色背景的框，输入他们不喜欢的内容。
@LeeWillis 以 Windows 为例。在标准设置下，单击选择并双击打开/执行。但就像 OP 问题一样，真正做到两全其美，先选择再双击执行。
@frikinside - 虽然没有抑制单击。如果双击该项目被选中，则打开。目前还不完全清楚 OP 想要做什么，但他现在发表了评论。
刚刚在这里找到了类似的链接stackoverflow.com/questions/17921556/…

标签： javascript click double-click

【解决方案1】：

我认为您可以通过一次超时轻松完成，如下所示：

// where "selector" is your html element selector
var element = $("selector"),
    single_click_timeout;

function clicked(e) {
    single_click_timeout = setTimeout(function() {
        // do something for a SINGLE click
    }, 400);
}

function dblclicked(e) {
    // stop the single click function
    clearTimeout(single_click_timeout);

    // do something for a DOUBLE click
}

element.on("click", clicked);
element.on("dblclick", dblclicked);

这里的技巧是为setTimeout 函数设置正确的时间量。显然，用户不会以 1 秒的间隔执行双击，但也不会以 0.01 秒的间隔执行双击。所以现在你必须尝试为双击选择正确的毫秒数。

【讨论】：

【解决方案2】：

检查这是否有效，fiddle demo

$('div.box').prop("disabled", true); 我正在使用这条线来确保在某一点上只有一个处于活动状态，而且我将点击超时保持在 1000 毫秒，您可以将其修改为您喜欢的。

js代码：

//single click function
$('div.box').on('click',function(){
    setTimeout(function(){
        if($('div.box').prop("disabled"))    return;
        console.log('singleClick');
        $('div.box').prop("disabled", true);
        //some single click work.
        $('div.box').prop("disabled", false);
    },1000); 
});

//double click function
    $('div.box').on('dblclick',function(){       
        if($('div.box').prop("disabled"))    return;
        $('div.box').prop("disabled", true);
        console.log('doubleClick');
        //some work    then enable single click again
        setTimeout(function(){
            $('div.box').prop("disabled",false);
        },2000); 
    });

【讨论】：