记录使用fastclick插件在ios系统中产生的bug

前言：前段时间为了提高iOS端的性能和使用体验，安装了fastclick插件。fastclick插件确实在iOS端让点击事件和交互变的流畅，让用户体验感比较好。不过正当我感觉一切都大功告成的时候，用户反馈某个部分点击之后页面就卡着不动了，这让我安下的心又悬了起来，立马打开代码排查问题，果然bug存在而且是成对存在。

bug1： 使用原生的confirm模态对话框无法弹出，并且会导致页面卡死。

Window.confirm()  方法显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框。具体演示Window confirm() 方法

问题原因：

FastClick 是一个用来解决移动端点击延迟问题的 JavaScript 库。它通过立即触发 click 事件来提高响应速度，从而消除移动端浏览器上的 300ms 点击延迟问题。然而，在使用 FastClick 时，可能会遇到与原生 window.confirm() 方法不兼容的问题，导致页面在调用 confirm() 后出现卡死现象。

这是因为 FastClick 会拦截并处理所有的 click 事件，包括那些由 confirm() 弹窗按钮触发的事件，可能导致预期的流程中断或异常。

问题解决：

基于Promise的自定义确认对话框方法，避开直接使用原生confirm()，从而绕过FastClick导致的问题，使用Promise包装confirm，使其成为一个异步操作。

落地代码：

async function delData() {
 
  // 使用Promise包装confirm，使其成为一个异步操作
  const confirmDelete = new Promise((resolve) => {
    setTimeout(() => {
      resolve(confirm("确认删除？"));
    }, 0);
  });
 
  try {
    if (await confirmDelete) {
        //这里写点击确认之后的回调函数或者操作
    } else {
      // 用户点击了取消
      console.log("点了取消");
      return false;
    }
  } catch (error) {
    console.error('An error occurred during deletion:', error);
  }
}

bug2: 使用上传图片的功能受限（例：使用naive ui 或者 element ui 的 upload组件），点击上传时控制台会报如下错误并且点击不会弹出选择图片的框，页面没有任何反应。

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See:www.chromestatus.com/feature/509…

问题原因：

由于Chrome浏览器的一项干预措施，旨在提高页面滚动性能。从Chrome 56版本开始，默认情况下，对touchstart和touchmove事件的监听器被设置为"passive"，这意味着它们不能调用event.preventDefault()来阻止浏览器的默认滚动行为。

FastClick库为了处理移动端的点击延迟，通常会监听这些触摸事件并尝试阻止默认行为，以便立即触发点击处理。但在被动监听器中，这种阻止是被禁止的，从而导致了上述警告。

问题解决： 添加CSS样式 touch-action: pan-y;

当设置为 touch-action: pan-y; 时，你允许元素仅在垂直方向上响应平移（panning）手势，而水平方向上的滑动将不会触发页面滚动，这有效地告诉浏览器该元素不应该阻止默认的水平滚动行为。这样一来，浏览器就不会将该元素的触摸事件监听器标记为需要阻止默认行为的非passive模式，从而避免了上述警告。

特别是在使用FastClick或其他库处理移动端点击事件时，通过这种方式可以避免与浏览器默认滚动行为的冲突，同时保持页面滚动的流畅性。这是一种兼容现代浏览器触摸事件处理策略的解决方案，既解决了警告问题，又不影响用户体验。

落地代码：

<template>
 <n-upload 
    list-type="image-card"
    action=""
    class="no-fastclick"
    :max="4"
 />
</template>
 
 
<style lang="less" scoped>
 
.no-fastclick{
  touch-action: pan-y;
}
 
</style>

结语： 第二个bug使用此方法并没有完全解决iOS系统上传图片的问题，在iOS系统方面需要双击才能打开上传弹窗或者拍照之类功能，只是一个折中的办法。另外，两种bug在安卓端均无出现，安卓端也无需使用fastclick插件来优化点击操作等，安装fastclick插件在安卓端不会产生bug情况。如果对于第二个bug有更好的办法，各位jym评论区请留言！