1

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

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

这是我正在使用的代码。

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

​</p>

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

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

4

6 回答 6

3

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;
});
于 2012-09-10T14:09:42.790 回答
3

编辑：发生的情况是，当第二次 mousedown 发生而没有 mouseup 时，超时变量被覆盖。这使得第一个间隔被困在永远循环中。您可以通过跟踪间隔是否已经过去并禁用 mousedown（如果是）来解决此问题。无论使用什么鼠标按钮，这都有效。

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

于 2014-11-14T14:54:24.453 回答
1

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

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

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

于 2012-09-10T14:11:31.370 回答
1

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

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

点击的发生与您按住按钮的时间无关。此外，您可以在 mousedown 中开始单击时间并检查 mouseup 事件中的差异并仅在差异小于 X 毫秒时更改背景

于 2012-09-10T14:09:06.813 回答
1

就像 FAangel 指出的那样，您也可以使用起点差异，编写代码，而其他答案已经发布：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');
于 2012-09-10T14:17:25.297 回答
0

在 mousedown 事件上将一些数据附加到元素并在 click 事件上检查它。这是示例。

于 2012-09-10T14:10:38.333 回答