移动端关闭Fancybox 3：点击外部区域关闭的实现方法

当然可以实现这个需求啦！下面给你两种实用的方法，适配不同场景：

方法一：利用Fancybox自带配置项（推荐） #

Fancybox本身就提供了控制点击外部关闭的参数，只是默认在移动端可能因为触摸滑动的逻辑被限制了，我们手动开启即可：

如果是Fancybox v3+版本，初始化时添加clickOutside配置：

Fancybox.bind("[data-fancybox]", {
  // 开启点击外部区域关闭功能，全设备生效
  clickOutside: true,
  // 可选：指定触发关闭的外部元素，默认是.fancybox-bg背景层
  clickOutsideTrigger: ".fancybox-bg",
  // 保留移动端滑动关闭的原有功能（默认开启，无需额外设置）
  touch: {
    vertical: true, // 允许上下滑动关闭
  }
});

如果是Fancybox v2版本，参数名是closeClick，配置如下：

$("[data-fancybox]").fancybox({
  closeClick: true // 点击外部区域关闭弹窗
});

这种方法最省心，完全利用官方API，不会有兼容性问题。

方法二：自定义触摸事件监听（兼容特殊场景） #

如果自带配置不生效，或者需要更灵活的控制，可以手动监听移动端的触摸事件：

// 监听全局触摸开始事件
document.addEventListener('touchstart', function(e) {
  // 获取Fancybox的背景层元素
  const fancyboxBg = document.querySelector('.fancybox-bg');
  // 判断当前触摸的是背景层（即外部区域），且弹窗处于打开状态
  if (fancyboxBg && e.target === fancyboxBg && Fancybox.getInstance()) {
    // 关闭当前弹窗
    Fancybox.close();
  }
}, { passive: true }); // passive: true 优化移动端滚动性能

注意事项 #

• 优先使用方法一，官方API经过充分测试，稳定性更高；
• 测试时尽量用真实移动端设备，或者Chrome浏览器的移动端开发者工具模拟，避免桌面端触摸模拟的偏差；
• 如果使用旧版Fancybox，记得对应调整参数名和关闭方法（比如v2版本用$.fancybox.close()）。

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