使用jQuery UI与touch-punch调整元素时Chrome移动端模式报错求助

问题场景 #

在使用jQuery UI配合jquery.ui.touch-pouch插件实现元素调整操作时，仅在Chrome浏览器PC端开启移动端模式（快捷键Ctrl+Shift+M）测试时，出现如下干预警告：

[Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

错误成因 #

• jquery.ui.touch-pouch的核心是将触摸事件模拟为鼠标事件，在处理touchend事件时，插件会默认尝试调用event.preventDefault()或event.stopPropagation()阻止默认行为。但当浏览器检测到滚动操作正在进行时，该touchend事件的cancelable属性会被设为false，此时尝试取消事件就会触发Chrome的干预警告。
• Chrome的移动端模拟模式会严格遵循移动端浏览器的事件规则，滚动状态下会锁定事件的可取消性，这一问题在真实PC环境下不会触发，但模拟移动端时会暴露。

解决方法 #

1. 修改touch-pouch插件的事件处理逻辑 #

找到touch-pouch源码中处理touchend事件的代码段，在调用事件阻止方法前增加cancelable判断：

// 定位到touch-pouch中的touchend事件绑定部分
$(document).on('touchend', function(event) {
  // ... 插件原有逻辑代码
  // 替换原有的preventDefault/stopPropagation调用
  if (event.cancelable) {
    event.preventDefault();
    event.stopPropagation();
  }
  // ... 插件原有逻辑代码
});

通常这段代码在插件的$.fn.mouseTouchMouse方法内的touchend处理环节。

2. 禁用元素的默认触摸滚动行为 #

通过CSS限制调整元素及其父容器的滚动行为，避免浏览器进入滚动锁定状态：

/* 替换为你的元素选择器 */
.resize-target, .resize-target-parent {
  overflow: hidden;
  touch-action: none;
}

touch-action: none会告知浏览器无需为该元素处理触摸滚动、缩放等默认行为，从根源减少事件冲突。

3. 替换为维护版touch-pouch插件 #

部分社区维护的touch-pouch分支（如GitHub上的fork版本）已经修复了该事件判断问题，直接替换为这些版本可以避免手动修改源码的麻烦。

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