JS拖拽功能服务器端因touchstart事件丢失touches信息失效

1. 修复jQuery事件对象的访问方式 #

jQuery会对原生事件对象进行封装，原生的touches属性被存放在originalEvent属性里，修改代码如下：

// 替换touchstart分支的坐标计算代码
xCoord =
  parseInt(evt.originalEvent.touches[0].clientX) -
  (parseInt(evt.target.offsetLeft) +
    parseInt(evt.target.offsetParent.offsetLeft));
yCoord =
  parseInt(evt.originalEvent.touches[0].clientY) -
  (parseInt(evt.target.offsetTop) +
    parseInt(evt.target.offsetParent.offsetTop));

2. 改用原生JS绑定事件（备选） #

如果不想处理jQuery的封装逻辑，直接用原生JS绑定触摸事件，确保拿到原生事件对象：

document.getElementById('canvas').addEventListener('touchstart', function(evt) {
  // 这里的evt是原生事件对象，可直接访问evt.touches
  // 把原有逻辑迁移到这里即可
}, false);

3. 检查服务器端页面配置 #

部分服务器或CDN可能会修改页面的viewport设置，导致触摸事件异常，确保页面头部的viewport标签正确：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

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