无需 mouseup 即可识别长按

Question

我尝试识别长按来启动摇动动画，但我想在按下按钮时启动它，而不是在我得到 mouseup 事件之后。到目前为止，我有以下代码可以执行我不想要的，但这是一个开始..

var offset = 10;
$('body').on('mousedown','.img-select', function (e) {
    $(this).data('start', new Date().getTime());
}).on('mouseup','.img-select', function (e) {
    if (new Date().getTime() >= ($(this).data('start') + offset)) {
        this.blur(); //to avoid a selectbox from opening
        window.focus(); //to avoid a selectbox from opening
        $('.img-item').addClass('shake');
    }
}).on('mouseleave','.img-select', function (e) {
    start = 0;
});

来自@prajmus 建议的想法：

$('body').on('mousedown','.img-select', function (e) {
    //$(this).data('start', new Date().getTime());
    setTimeout(function(){
      $('.img-item').addClass('shake');
    },1000);
}).on('mouseup','.img-select', function (e) {
    /*if (new Date().getTime() >= ($(this).data('start') + offset)) {
        this.blur();
        window.focus();
        $('.img-item').addClass('shake');
    }else{

    }*/
}).on('mouseleave','.img-select', function (e) {
    start = 0;
});

我的 mousedown 事件处理程序中的代码似乎是在我释放按钮时首先启动的？！

由于某种原因，我从@prajmus 推荐的超时内的代码根本没有执行。

在我的想象中，它应该就像你在 ios 中拿着一个应用程序图标..

Answer 1

您必须将计时器分配给一个变量：

var timeout;
$('body').on('mousedown','.img-select', function (e) {
    timeout = setTimeout(function(){
      $('.img-item').addClass('shake');
    },1000);
}).on('mouseup','.img-select', function (e) {
    clearTimeout(timeout);
}).on('mouseleave','.img-select', function (e) {
    start = 0;
});

查看jsfiddle