Javascript 执行单击或双击。不是两者都有

我需要在单击时执行一个函数，在双击时执行另一个函数。我面临的问题是，如果不先进行两次单击，就不能进行双击活动。我想，每当我们有双击，然后只有双击功能应该执行，而不是单点击功能。以下是我到目前为止所做的一些事情。请建议是否有更好的方法来做这件事，因为下面的代码并不总是完美的工作

HTML

CSS:

---

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

// 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秒的间隔执行双击。因此，现在您必须尝试为双击选择正确的毫秒数。

检查这是否有效

$（'div.box'）.prop（“禁用”，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); 
    });

从用户体验的角度来看，这样做似乎是错误的。我试图想出一个应用程序，它在双击时可以做完全不同的事情，但我不能。如果有人将双击速度设置为低或高，该怎么办？你假设双击速度在你的超时，这可能是你的问题。也许如果你发布你想要达到的目标，你可能会得到一些替代的解决方案。假设我想在我的网站上放置一张图片，并要求访问者在图片的不同区域给出喜欢和不喜欢的评论。单击图像将打开一个绿色背景的框，在其中他们可以在单击的区域输入自己喜欢的内容。双击将打开一个红色背景的框，输入他们不喜欢的内容。@Leewills我们来看看Windows。在标准设置下，单击选择并双击打开/执行。但就像OP问题一样，真正做到这两件事，首先选择，然后双击执行。@frikinside-但单次单击并没有被抑制。如果双击选定的项目，则打开该项目。目前还不完全清楚OP想要做什么，但他现在已经发布了一条评论。只是在这里找到了类似的链接
div.box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
}

// 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);

//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); 
    });