Question

我需要在单击时执行一个功能，双击时需要执行其他功能。我面临的问题是因为我们不能在没有首次点击两次的情况下进行双击事件。我想，每当我们双击，那么只有双击功能才能执行非单击功能。以下是我到目前为止所做的事情。请建议是否有更好的方法，因为下面的代码并不总是完美的。

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

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

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

执行单击或双击。不是都

2 个答案: