IOS 15下Ionic 5应用长按图片可拖拽保存问题如何解决

该行为是iOS 15版本后WebKit内核新增的默认图片拖拽特性，针对Ionic 5应用可通过以下方案实现禁用：

方案1：全局CSS控制（优先推荐，实现最简单） #

直接在项目全局样式文件（通常为src/global.scss或theme/variables.scss）中添加如下规则，覆盖WebKit默认行为：

/* 同时兼容原生img标签和Ionic的ion-img组件 */
img, ion-img {
  /* 禁用拖拽能力 */
  -webkit-user-drag: none !important;
  user-drag: none !important;
  /* 可选：同时禁用长按弹出的系统保存/分享菜单 */
  -webkit-touch-callout: none !important;
}

如果仅需要禁用部分页面的图片拖拽，把上述样式写入对应页面的scss文件即可。如果存在特殊图片需要保留拖拽能力，调整选择器排除对应类名即可，示例：

img:not(.allow-drag), ion-img:not(.allow-drag) {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
}

方案2：全局事件拦截（兼容复杂场景，避免样式失效） #

如果存在动态加载图片、CSS规则偶发不生效的情况，可以在应用根组件（通常为app.component.ts）的初始化逻辑中添加全局事件监听，直接阻断拖拽行为：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // 拦截拖拽开始事件
    document.addEventListener('dragstart', (e) => {
      const targetTag = e.target.tagName.toUpperCase();
      if (targetTag === 'IMG' || targetTag === 'ION-IMG') {
        e.preventDefault();
        e.stopPropagation();
      }
    }, false);

    // 可选：拦截长按右键菜单事件，禁用系统保存选项
    document.addEventListener('contextmenu', (e) => {
      const targetTag = e.target.tagName.toUpperCase();
      if (targetTag === 'IMG' || targetTag === 'ION-IMG') {
        e.preventDefault();
      }
    }, false);
  }
}

两种方案可以叠加使用，双重保障适配iOS 15以上所有版本的WebView环境。

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