执行单击或双击。不是都

Triven 发表于 Dev

特里文

我需要在单击时执行一个功能，在双击时执行其他功能。我面临的问题是由于这样的事实，即我们必须先单击两次才能发生双击事件。我想，只要我们有双击功能，就只能执行双击功能，而不能执行单击功能。到目前为止，以下是我已经完成的操作。请提出是否有更好的方法，因为下面的代码并不总是能正常工作。

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

马可·博内利

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

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