WordPress环境下jQuery click生效但touchstart事件无响应问题求助

问题根因 #

• 标准jQuery核心库没有内置.touchstart()快捷绑定方法，直接调用该方法属于无效写法
• tap是jQuery Mobile扩展的专属事件，未引入jQuery Mobile库的前提下绑定on("tap")不会触发

解决方案 #

方案1：绑定原生触摸事件（无需额外引入依赖，推荐） #

直接通过.on()方法绑定原生touchstart事件即可，可同时绑定click事件兼顾桌面端使用场景：

jQuery(document).ready(function() {
  // 可按需只保留touchstart，同时绑定click可兼容桌面端操作
  jQuery('.changecolor span').on('touchstart click', function(e) {
    // 可选：添加下面这行代码避免触摸后重复触发click事件（解决点透问题）
    e.preventDefault();
    
    // 此处直接复用你原有的业务逻辑代码即可
    // ...
  });
});

如果之前绑定过旧的click事件，为了避免重复触发，可先解绑旧事件再绑定新事件：

jQuery('.changecolor span').off('click touchstart').on('touchstart click', function(e) {
  // 业务逻辑
})

方案2：模拟tap事件（需要轻触判断、消除300ms延迟时使用） #

如果需要tap事件的特性（区分轻触和滑动、消除移动端默认300ms点击延迟），不需要引入整个jQuery Mobile，用以下代码即可实现模拟：

jQuery(document).ready(function() {
  let touchStartX = 0;
  let touchStartY = 0;
  jQuery('.changecolor span').on('touchstart', function(e) {
    touchStartX = e.originalEvent.touches[0].pageX;
    touchStartY = e.originalEvent.touches[0].pageY;
  }).on('touchend', function(e) {
    const touchEndX = e.originalEvent.changedTouches[0].pageX;
    const touchEndY = e.originalEvent.changedTouches[0].pageY;
    // 偏移小于10px判定为轻触
    if (Math.abs(touchEndX - touchStartX) < 10 && Math.abs(touchEndY - touchStartY) <10) {
      e.preventDefault();
      // 此处放业务逻辑代码
      // ...
    }
  });
});

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