移动端拖拽事件触发但点击事件失效（Android端异常）求助

这是jQuery UI Touch Punch在Android设备上的已知行为差异，核心原因在于：

• Touch Punch本质是将触摸事件模拟为鼠标事件，以此适配jQuery UI的拖拽组件。
• iOS系统会自动区分「短按无位移的点击」和「有位移的拖拽」，但Android的触摸事件触发阈值更低，哪怕手指有极微小的移动，都会被Touch Punch识别为拖拽起始动作，优先触发draggable相关事件，直接覆盖了click。
• Touch Punch的默认逻辑没有针对Android的触摸特性做阈值过滤，导致点击和拖拽的交互边界模糊。

快速解决方案：设置拖拽距离阈值 #

给jQuery UI的draggable添加distance配置项，只有当拖拽位移超过设定像素时，才触发拖拽逻辑；短按无位移的操作则会正常触发click事件。

修改后的代码如下：

$("#myel").click(function() {
  alert("Clicked");
});

$("#myel").draggable({
  distance: 10, // 设定10px的位移阈值，可根据需求调整
  stop: function() {
    alert("Dragged");
  }
});

其他可选方案 #

1. 自定义触摸事件判断：手动监听touchstart、touchmove、touchend事件，记录触摸的起始位置和时间，在touchend时判断：如果位移小于阈值且触摸时长较短，则触发click；否则执行拖拽逻辑。这种方式需要绕过Touch Punch的默认事件绑定，适合对交互精度要求更高的场景。
2. 替换拖拽库：放弃Touch Punch，使用原生触摸事件实现拖拽，或者采用更适配移动端的现代拖拽库，避免依赖jQuery UI的鼠标事件模拟逻辑。

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