javascript - 无需鼠标弹起即可识别长按

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