如何合并Click与TapHold为单次调用？解决长触不触发Click事件问题

方案一：调整Chromium浏览器配置（无需修改代码） #

Chromium默认的触摸行为可能过滤长按触发的click事件，且长按会弹出上下文菜单干扰操作。可通过启动参数直接调整：

1. 修改Chromium启动命令，添加以下参数：

chromium-browser --kiosk --touch-events=enabled --touch-action=manipulation --disable-context-menu --long-press-timeout=3000 --disable-pinch --overscroll-history-navigation=0

参数说明：

• --touch-events=enabled：强制启用触摸事件支持
• --touch-action=manipulation：告知浏览器元素仅支持点击/缩放，优化触摸响应
• --disable-context-menu：禁用长按弹出的上下文菜单，避免抢占事件
• --long-press-timeout=3000：将长按识别超时设为3秒（可按需调整，适配行动缓慢用户）
• --disable-pinch、--overscroll-history-navigation=0：禁用不必要的触摸手势，减少干扰

2. 若通过桌面快捷方式或系统服务启动，直接修改对应启动命令即可。

方案二：封装通用触摸事件处理函数（代码层面解决） #

若无法修改浏览器配置，可封装jQuery扩展方法，统一处理触摸事件，避免每个元素重复绑定三个事件：

代码实现 #

// 封装支持长按触摸的jQuery扩展方法
$.fn.longTouchClick = function(callback) {
  // 允许的最大触摸移动像素，超过则判定为滑动，取消触发
  const MAX_MOVE_THRESHOLD = 10;
  // 长按触发的时间阈值（毫秒），可自定义
  const LONG_PRESS_DELAY = 2000;

  this.on('touchstart', function(e) {
    const touch = e.originalEvent.touches[0];
    // 将触摸起始状态存储在元素自身的data中，避免多元素互相干扰
    $(this).data({
      touchStartX: touch.clientX,
      touchStartY: touch.clientY,
      touchTimeout: setTimeout(() => {
        // 长按超时后触发回调，保持this指向当前元素
        callback.call(this, e);
      }, LONG_PRESS_DELAY)
    });
  });

  this.on('touchmove', function(e) {
    const touch = e.originalEvent.touches[0];
    const startX = $(this).data('touchStartX');
    const startY = $(this).data('touchStartY');
    const moveX = Math.abs(touch.clientX - startX);
    const moveY = Math.abs(touch.clientY - startY);

    // 如果触摸移动超过阈值，取消长按触发
    if (moveX > MAX_MOVE_THRESHOLD || moveY > MAX_MOVE_THRESHOLD) {
      clearTimeout($(this).data('touchTimeout'));
      $(this).removeData(['touchStartX', 'touchStartY', 'touchTimeout']);
    }
  });

  // 触摸结束或取消时清理状态
  this.on('touchend touchcancel', function() {
    clearTimeout($(this).data('touchTimeout'));
    $(this).removeData(['touchStartX', 'touchStartY', 'touchTimeout']);
    // 如需支持短按触发，取消下面的注释
    // callback.call(this, e);
  });

  // 保留原生click事件，兼容鼠标操作
  this.on('click', callback);

  return this;
};

使用示例 #

// 给所有需要支持长按的按钮绑定事件
$('.action-btn').longTouchClick(function() {
  // 这里写原来的click事件逻辑
  console.log('触发了点击/长按操作');
  // 比如执行按钮对应的操作：
  // $(this).addClass('active');
});

额外优化 #

为避免浏览器默认触摸行为干扰，可在CSS中添加：

* {
  -webkit-touch-callout: none; /* 禁用触摸弹出菜单 */
  -webkit-user-select: none; /* 禁用文本选择 */
  touch-action: manipulation; /* 优化触摸响应 */
}

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