Panzoom库点击图片缩放仅首次生效问题解决方案

使用Panzoom库实现点击图片缩放交互，预期逻辑为2次点击分两阶段放大图片，第3次点击直接缩小还原至初始比例。实际运行时仅首次流程正常，第四次点击会同时输出第一阶段放大日志与缩小日志，页面无任何缩放变化。

• 事件重复绑定：原代码在点击回调内部嵌套绑定缩小逻辑的click事件，每触发一次放大到最大比例的逻辑，就会给img新增一个点击监听器，后续点击会同时触发放大、多个缩小逻辑，缩放值互相抵消，最终页面无变化。
• 属性写法错误：img.style.pointer = 'zoom-out'为无效写法，控制光标的正确属性是cursor。
• 取值时机错误：zoomIn带动画是异步过程，调用后立刻执行getScale()拿到的不是动画完成后的最终缩放值，比例判断逻辑失效。
• 步长配置不匹配：原配置step为0.5，初始比例1的情况下需要3次点击才能到最大2.5倍，不符合2次点击放大到顶的需求。

Javascript #

const img = document.querySelector('img')
const panzoom = new Panzoom(img.parentElement, {
  minScale: 1,
  maxScale: 2.5,
  step: 0.75,
  panOnlyWhenZoomed: true,
  cursor: 'zoom-in',
});

img.addEventListener('click', () => {
  const currentScale = panzoom.getScale();
  // 当前已到最大缩放比例，直接重置为初始1倍
  if (currentScale >= panzoom.options.maxScale) {
    panzoom.zoom(1, { animate: true });
    img.style.cursor = 'zoom-in';
    console.log("Zoom out: 1");
    return;
  }
  // 未到最大比例则执行放大
  panzoom.zoomIn({ animate: true });
  // 缩放完成后再执行状态判断、日志打印
  panzoom.on('zoom', () => {
    const newScale = panzoom.getScale();
    console.log("Zoom in: ", newScale);
    if (newScale >= panzoom.options.maxScale) {
      img.style.cursor = 'zoom-out';
    }
  }, { once: true });
})

CSS #

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.offerBox_image {
  max-width: 429px;
}
.offerBox_image img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

HTML #

<script src="https://unpkg.com/@panzoom/panzoom@4.5.0/dist/panzoom.min.js"></script>
<div class="offerBox_image">
  <img
    data-id="1"
    class="img"
    src="https://source.unsplash.com/random/1100x1100"
    alt=""
  />
</div>

• 所有点击逻辑统一放在单个事件监听器中处理，移除嵌套绑定事件的写法，避免事件累计触发。
• 调整step值为0.75，初始比例1的场景下，第一次点击放大到1.75、第二次点击放大到最大2.5，符合两阶段放大的需求。
• 修正光标属性写法，缩放过程中同步更新cursor样式。
• 绑定单次zoom事件监听，在缩放动作完成后再获取缩放值做判断，避免动画过程中取值不准。
• 达到最大比例时直接调用zoom方法重置到初始比例，保证一次点击即可还原。

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