如何避免jQuery中的“click tap touchstart”事件的幽灵点击？

9gm1akwq 于 2023-01-16 发布在 jQuery

关注(0)|答案(1)|浏览(125)

我现在已经试图找到一个解决这个问题的几个小时了，显然我不能解决这个问题自己。
所以这个想法本身很简单，我想触发#game-undo的点击，它在桌面上运行得很好，但是下面的代码在移动的和平板电脑上会导致鬼点击。

$(document).on('click tap touchstart','.game-undo-btn',function(event){
    $('#game-undo').trigger('click');
});

因此，我尝试的第一个解决方案如下：

$(document).on('click tap touchstart','.game-undo-btn',function(event){
    if(event.type == "click") {
        $('#game-undo').trigger('click');
        console.log('click triggered');
    } 
    else if(event.type == "tap") {
        $('#game-undo').trigger('click');
        console.log('tap triggered');
    } 
    else if(event.type == "touchstart") {
        $('#game-undo').trigger('click');
        console.log('touchstart triggered');
    }
});

我的PHP逻辑告诉我，如果event.type是click，那么其余的 else语句 * 就不会执行。我想我错了，因为控制台告诉我click和touchstart都被触发了。
然后，我尝试使用event.preventDefault();，但我很快发现这是不可能的，因为当添加touchstart时，事件侦听器 * 将被视为被动的。
使用event.preventDefault();时控制台中的消息为：
[干预]由于目标被视为被动，因此无法在被动事件侦听器内阻止默认值。
好了--我的下一步是尝试一下event.stopPropagation();--但是这一步被忽略了，而且 *else语句 * 还是会被执行。

没有重复的编码。

希望你们能帮帮我。谢谢。

jquery

来源：https://stackoverflow.com/questions/75109356/how-do-i-avoid-ghost-clicks-for-click-tap-touchstart-events-in-jquery

1条答案

按热度按时间

dxxyhpgq1#

在JS中实现去抖不需要插件.下面是两个例子.

function debounce(func, timeout = 100){
    let timer;
    // args are your func arguments
    return (...args) => {
        clearTimeout(timeout);

        timer = setTimeout(() => {
            func.apply(this, args);
        }, timeout);
    };
}

function _event_handler(event){
    // your event handler code
}

const event_handler = debounce(() => _event_handler);

$(document).on('click tap touchstart', '.game-undo-btn', event_handler);

// jquery comes with it

function _event_handler(event){
    // your event handler code
}

// timeout, function
const event_handler = $.debounce(300, _event_handler);

赞(0）回复(0）举报 2023-01-16

我来回答

如何避免jQuery中的“click tap touchstart”事件的幽灵点击？

1条答案

相关问题

热门标签

最新问答