如何在jQuery中避免click/tap/touchstart事件的幽灵点击问题

问题背景 #

需要触发#game-undo的click事件，桌面端功能正常，但在移动设备/平板端出现幽灵点击（同一操作触发多次事件）。原绑定多事件的代码如下：

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

尝试通过判断event.type分支处理，但控制台显示click和touchstart均被触发；使用event.preventDefault()时遇到被动监听报错：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

event.stopPropagation()也无法阻止重复触发，确认无重复代码。

解决方案 #

方案1：移除冗余事件，仅保留click #

移动端浏览器会自动将触摸操作转化为click事件，同时绑定touchstart/tap会导致重复触发。直接保留click即可：

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

如果担心移动端点击延迟，可以添加CSS优化：

.game-undo-btn {
    touch-action: manipulation; /* 禁用双击缩放等触摸行为，提升点击响应速度 */
}

方案2：使用Pointer Events统一处理 #

Pointer Events API统一了鼠标、触摸等输入事件，避免多事件绑定的冲突：

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

方案3：通过标志位阻止重复触发 #

如果必须保留多事件绑定，可通过一个全局标志位控制，避免同一操作多次触发：

let isActionTriggered = false;
$(document).on('click touchstart','.game-undo-btn',function(event){
    if (isActionTriggered) return;
    isActionTriggered = true;
    
    $('#game-undo').trigger('click');
    
    // 1秒后重置标志，确保后续操作正常触发
    setTimeout(() => {
        isActionTriggered = false;
    }, 1000);
});

问题原因说明 #

• 移动端触摸操作会先触发touchstart，浏览器随后会合成一个click事件，绑定多个事件会导致两次触发。
• passive事件监听是浏览器默认优化（用于滚动等场景），此时无法调用preventDefault()阻止默认行为。
• event.stopPropagation()仅阻止事件冒泡，无法阻止同一元素上多个事件的触发。

内容的提问来源于stack exchange，提问作者Niels Hermann