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

识别长按没有鼠标

1 个答案: