Question

我有一个按钮，我想根据用户是否单击按钮一次或长按它来调用不同的功能。

单击可以正常工作，但是如果我长按按钮，则执行长按功能，然后执行单击功能。

这是我正在使用的代码。

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
timeout = setInterval(function(){
    clicker.text(count++);
}, 500);

return false;
});

$(document).mouseup(function(){
clearInterval(timeout);
return false;
});


clicker.click(function(){
$(this).css('background', 'red');
return false;
});

看到这个小提琴：http://jsfiddle.net/8FmRd/181/

在第一次长按时，div的颜色不应变为红色。

Answer 1

http://jsfiddle.net/8FmRd/189/

var timeout, clicker = $('#clicker');
var count = 0;

clicker.mousedown(function(){
    count = 0;
    timeout = setInterval(function(){
        clicker.text(count++);
    }, 500);

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

clicker.click(function(){
    clearInterval(timeout);
    if (count < 1) {
        $(this).css('background', 'red');
    }
    return false;
});

Answer 2

编辑：当没有鼠标时发生第二次mousedown时，会发生超时变量被覆盖的情况。这使得第一个间隔被搁置以永久循环。您可以通过跟踪间隔是否已经开始来修复此问题，如果是，则禁用mousedown。无论使用何种鼠标按钮，这都有效。

Gustonez提供的原始示例和解决方案似乎都有一个小错误，如果您在左键单击中间右键单击然后释放两者，则计时器将继续运行。我相信这是因为右键单击也会触发mousedown事件，但是鼠标按钮会被显示的上下文菜单淹没。无论哪种方式，您都可以通过禁用mousedown进行右键单击来解决此问题。（右键单击由元素表示，其值为3）

var timeout, clicker = $('#clicker');
var count = 0;
var active = false;

clicker.mousedown(function(e){
    if (active) {
        return false;
    }

    timeout = setInterval(function(){
        clicker.text(count++);
        $(this).css('background', 'orange')
    }, 500);

    active = true;

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    active = false;
    return false;
});


clicker.click(function(){
    clearInterval(timeout);
    active = false;
    return false;
});

JSFiddle：http://jsfiddle.net/8FmRd/634/

Answer 3

删除clicker.click并在mouseup事件中检查计数，例如：

$(document).mouseup(function(){
   clearInterval(timeout);
   if(count < 2) {
      $(this).css('background', 'red');
   }
   return false;
});

点击将不会取决于您按住按钮的时间长短。此外，您可以在mousedown中开始单击时间并检查mouseup事件的差异，并仅在差异小于X毫秒时更改背景

Answer 4

只需将您的点击器功能更新为以下

即可

clicker.click(function() {
    if(clicker.text() < 1) {       
       $(this).css('background', 'red');
    }
   return false;
});

这是jsFiddle http://jsfiddle.net/8FmRd/187/

Answer 5

就像FAngel指出的那样，你也可以使用起始端差异，编写代码，而其他答案已经发布：P：

jsfiddle

var timeout,
    timerStart,
    timerEnd,
    count = 0,
    interval = 500;

$(document).on({
    mousedown: function() {
        timerStart = new Date().getTime();

        var $clicker = $(this);
        timeout = setInterval(function(){
            $clicker.text(count++);
        }, interval);
        return false;
    },
    mouseup: function() {
        timerEnd = new Date().getTime();
        clearInterval(timeout);

        if(timerEnd - timerStart < interval) {
            $(this).css('background', 'red');
        }
        return false;
    }
}, '#clicker');

Answer 6

将一些数据附加到mousedown事件上的元素，并在click事件上进行检查。这是example。

具有单击和长按键的单独功能

6 个答案: