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

---

签出

您可以在mousedown中使用

设置超时

，并在mouseup中删除此超时。这样，如果通过了所需的超时，将发生抖动，否则将删除其执行。@prajmus尝试过这种方法，但似乎超时是在我离开按钮后第一次执行的。可能超时值太短了

setTimeout

和

Date.getTime（）

使用毫秒，因此10的偏移量是sooshort@prajmus我试过了，如我的编辑中所示，但在我再次释放按钮后，它会执行一秒钟。是的，它在JSFIDLE中工作，但由于某些原因，它对我不起作用，添加代码后，它现在根本不起作用。甚至在我释放它后的一秒钟内…你必须按住它1秒钟。很难说这段代码有什么问题。这个例子本身非常好。是的，我知道这一点，我将插入一些日志命令，看看会发生什么，然后返回结果。我的小日志乐趣的结果是，超时内的代码甚至没有执行，所以我删除了超时，以查看只有我的addClass在其中发生了什么，而且似乎直到我释放按钮…发布到事实上，我在ipad上使用了这个代码，但它不起作用，我不得不使用

touchstart

和

touchend

，而不是

mousedown

和

mouseup

。但我当然忘了说我在ipad上。。