图片能双指缩放，却不能左右翻页，不一定是“两个插件天生不能共存”。应先确认引入的是哪一套实现，再看它们如何分配单指拖动、双指缩放和事件取消。

2019 年项目里，两种手势只剩一种可用

当时 H5 已用 Swipe 做轮播，增加 PinchZoom 后，缩放正常，左右滑动失效。第一组接入方式是加载 pinch-zoom.umd.js，再用这个入口初始化：

Array.from(document.querySelectorAll(".pinch-zoom"))
  .forEach(function (element) {
    new PinchZoom.default(element, {});
  });

window.mySwipe = new Swipe(
  document.querySelector("#slider"),
  { speed: 400 }
);

后来找到一个两种手势都可用的页面，对比后发现它加载的是另一份 pinchzoom.js，使用的入口也不同：

$(function () {
  $("div.pinch-zoom").each(function () {
    new RTP.PinchZoom($(this), {});
  });

  window.mySwipe = new Swipe(
    document.getElementById("slider"),
    { speed: 400 }
  );
});

以上仅保留历史接口对照，依赖和 DOM 由各自页面提供，不是可直接运行的完整页面。第二份脚本使用 jQuery 风格入口，不能据此说所有同名 PinchZoom 实现都依赖 jQuery；default 导出与 RTP.PinchZoom 也不是只换文件名就能互换。

当时替换后获得了预期交互，但没有固定到依赖提交及完整事件证据，因此不能进一步认定某个官方 demo 有缺陷，或把某一行代码断言为唯一根因。

先把冲突缩小到可观察的手势

固定依赖仓库、版本、打包方式和许可，再做三种页面对照：只有轮播、只有缩放、两者组合。检查元素结构、加载顺序及是否重复初始化。

组合页面应分别观察：

  • 图片未放大时，单指是否应交给轮播。
  • 图片放大后，单指是否应移动图片而不是换页。
  • 双指缩放期间，轮播是否暂停响应。
  • 手指离开、缩回原比例后，交互是否恢复。
  • 子节点替换或页面销毁后，监听器是否被清理。

这里是在定义排查条件，不保证历史脚本天然支持全部行为。

事件取消要与监听配置一起看

某个监听器调用 preventDefault、阻止传播或提前认领触摸，都可能影响外层轮播；具体应记录事件目标、触点数量和监听器所在节点，不能靠全局禁用默认行为试错。

DOM 标准 说明 preventDefault 与事件可取消性、passive 监听条件有关；它与停止冒泡不是同一动作。相关区别也见 移动端默认行为与事件传播。

不要继续从未知预览页复制脚本充当依赖来源。先解决可追溯性，再在目标浏览器真机核对缩放、拖动与翻页，而不是把“替换后能动了”当成兼容性保证。