javascript - 识别长按而无需鼠标向上

我尝试识别长按以开始摇动动画，但是我想在按下按钮时而不是在获得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中保存一个应用程序图标。

最佳答案

您必须将计时器分配给变量:

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