手机端图片放大：优化PhotoSwipe.js插件实现双击与单击功能

"本文主要介绍了如何使用PhotoSwipe.js插件在手机端实现图片点击放大以及双击放大的功能，并提供了自定义代码以解决图片放大后单击无法关闭的问题。" PhotoSwipe.js是一款专为移动设备设计的轻量级图片查看器插件，它允许用户在全屏模式下查看图片，提供了类似于原生应用的体验。这个插件支持触摸手势，如滑动和双击，非常适合用于手机或平板电脑上的网页应用。 在默认设置下，PhotoSwipe插件提供了点击图片后全屏显示图片的功能，而双击可以进一步放大图片。然而，用户可能会遇到一个问题：在图片放大后，再次单击图片并不能关闭图片预览，而是需要用户点击关闭按钮或者通过滑动来退出。为了解决这个问题，我们可以直接修改photoswipe.js源码来添加自定义行为。 首先，你需要访问PhotoSwipe的官方网站（http://www.photoswipe.com/）下载最新的插件文件。接着，在代码编辑器中打开photoswipe.js，找到大约在3179行关于`tap`的函数定义。为了记录单击和双击的次数，我们需要在函数开头声明一个变量`var tap_num = 0;`。 然后，我们需要在`onTapStart`的定义中插入一段代码，以判断是单击还是双击。这段代码包括增加`tap_num`的计数，并设置一个200毫秒的定时器来检查接下来的点击动作。如果在200毫秒内有第二次点击，那么`tap_num`会重置回0，表示是双击操作；如果在此期间没有其他点击，`tap_num`仍然为1，此时执行关闭图片的操作。 ```javascript tap_num++; setTimeout(function() { if (tap_num > 1) { tap_num = 0; return; } else { tap_num = 0; // 判断是否有拖拽，如有拖拽触发拖拽事件，没有则关闭 if (_isDragging) { return; } else { self.close(); } } }, 200); ``` 此外，`_dispatchTapEvent`函数用于处理触摸事件的派发，而`registerModule`中的`Tap`模块则包含了`initTap`方法，用于监听`firstTouchStart`和`touchRelease`事件，以实现在触摸开始和结束时的响应。 通过以上修改，你可以使PhotoSwipe插件在手机端更符合用户的交互习惯，即在图片放大后，单击可以快速关闭图片预览，同时保留双击放大图片的功能。这种自定义调整提高了用户体验，使得PhotoSwipe.js更适合那些需要优化移动端图片查看体验的项目。