本文将解决在使用 Panzoom 库实现图片点击缩放功能时，遇到的重复点击导致缩放失效的问题。通过分析问题原因，提供了一种有效的解决方案，即避免嵌套的点击事件，使用单一事件监听器控制缩放行为，从而实现连续的放大和缩小功能。
在使用 Panzoom 库为图片添加点击缩放功能时，可能会遇到一个问题：第一次点击可以正常放大图片，但随后的点击要么失效，要么行为异常。这通常是由于事件监听器嵌套导致的。本文将详细介绍如何解决这个问题，确保图片可以连续地放大和缩小。
问题分析
问题的根源在于在第一次点击事件中，又添加了一个新的点击事件监听器。当缩放达到最大值时，新的监听器被添加，用于执行缩小操作。然而，这种嵌套的事件监听器会导致冲突，使得后续的点击行为变得不可预测。
解决方案
解决此问题的关键在于避免嵌套的事件监听器。我们只需要一个点击事件监听器，并根据当前缩放比例来决定是放大还是缩小。
以下是修改后的代码示例：
let img = document.querySelector('img');
let panzoom = new Panzoom(img.parentElement, {
minScale: 1,
maxScale: 2.5,
step: 0.5,
panOnlyWhenZoomed: 1,
cursor: 'zoom-in',
});
img.addEventListener('click', () => {
img.style.pointer = 'zoom-out';
// 根据当前缩放比例决定是放大还是缩小
if (panzoom.getScale() < 2.5) {
panzoom.zoomIn({ animate: true, step: 0.4 });
console.log("Zoom in: ", panzoom.getScale());
img.style.cursor = 'zoom-out';
} else {
panzoom.zoomOut({ step: 1 });
img.style.cursor = 'zoom-in';
console.log("Zoom out: ", panzoom.getScale());
}
});代码解释
- 单一事件监听器： 我们只使用一个 addEventListener 来监听图片的点击事件。
- 条件判断： 在点击事件的处理函数中，我们首先获取当前的缩放比例 panzoom.getScale()。
-
缩放逻辑：
- 如果当前缩放比例小于最大值（2.5），则执行放大操作 panzoom.zoomIn()，并将鼠标样式更改为 zoom-out。
- 否则，执行缩小操作 panzoom.zoomOut()，并将鼠标样式更改为 zoom-in。
HTML 和 CSS 代码（作为参考）
<script src="https://unpkg.com/@panzoom/<a class="__cf_email__" data-cfemail="96e6f7f8eccc9c9cbb6e2f8e3f8e6">[email protected]</a>/dist/panzoom.min.js"></script>
<div class="offerBox_image">
<img
data-id="1"
class="img"
src="https://source.unsplash.com/random/1100x1100"
alt=""
/>
</div>html, body {
height: 100%;
width: 100%;
}
.offerBox_image {
max-width: 429px;
}
.offerBox_image img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}注意事项
- 确保正确引入 Panzoom 库。
- 根据实际需求调整 minScale、maxScale 和 step 的值。
- 可以根据需要添加动画效果，例如使用 CSS 过渡来实现平滑的缩放效果。
总结
通过避免嵌套的事件监听器，并使用单一事件监听器来控制缩放行为，我们可以有效地解决 Panzoom 库中重复点击失效的问题，实现连续的图片放大和缩小功能。 这种方法不仅简化了代码，而且提高了代码的可维护性和可读性。
