检测 mousedown 事件持续多长时间,然后在超过一定时间后阻止 mouseup 操作

问题描述 投票:0回答:2

感谢您出售我们的 IP 来训练 AI 模型。

javascript jquery touch
2个回答
2
投票

好的,经过一些测试,我能够让它使用以下代码:

var longpress = false;

$(".TPGSW-wrapper").on('click', function (e) {
    (longpress) ?  e.preventDefault() : alert("clicked");
});

var startTime, endTime;
$(".TPGSW-wrapper").on('mousedown', function () {
    startTime = new Date().getTime();
});

$(".TPGSW-wrapper").on('mouseup', function () {
    endTime = new Date().getTime();

    if (endTime - startTime < 250) {
        longpress = false;
        console.log('< 250');
    } else if (endTime - startTime >= 300) {
        longpress = true;
        console.log('>= 300');
    }

});

演示

如果按住鼠标的时间少于 250 毫秒,则会触发单击事件,如果超过 300 毫秒,则会调用

e.preventDefault
并停止单击事件。


1
投票
else if (endTime - startTime >= 300) {
    $(this).one('click', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
    });
}

注意如何使用“one”而不是“on”。这样它只会触发一次,而不是之后每次都触发。

或者根据 JCOC611 的评论,您可以删除 mouseup 事件并就地使用它:

$(".TPGSW-wrapper").on('click', function (e) {
    var upClick = new Date();
    var endTime = upClick.getTime();

    if (endTime - startTime >= 300) {
        e.preventDefault();
        e.stopImmediatePropagation();
    }              
});
© www.soinside.com 2019 - 2024. All rights reserved.