iPhone邮件应用CID内嵌图片点击触发QuickLook问题解决方案咨询

以下几种方案可解决iPhone邮件中，带CID嵌入图片的<a>标签点击时同时触发QuickLook预览的问题：

• 透明覆盖层拦截点击
  给包裹图片的<a>标签添加一个绝对定位的透明元素，覆盖在图片上方，点击时实际触发的是覆盖层的事件，不会触发图片的QuickLook。实现代码：

  <a href="你的目标URL" style="position: relative; display: inline-block;">
    <img src="cid:你的图片ID" style="display: block; width: 100%;">
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 1;"></div>
  </a>
  

  iPhone邮件应用完全支持绝对定位，这个方法兼容性可靠。

• 将CID图片设为背景图
  放弃使用<img>标签，把CID图片作为<a>标签的背景图引入，点击时只会触发链接跳转，不会触发图片预览。实现代码：

  <a href="你的目标URL" style="display: inline-block; width: 300px; height: 200px; background-image: url('cid:你的图片ID'); background-size: cover;">
    <span style="display: block; width: 100%; height: 100%;"></span>
  </a>
  

  注意需要明确设置<a>标签的宽高，保证背景图完整展示。

• 使用pointer-events禁用图片点击响应
  给<img>标签添加pointer-events: none;样式，让图片不接收点击事件，点击直接触发父级<a>的跳转逻辑。实现代码：

  <a href="你的目标URL">
    <img src="cid:你的图片ID" style="pointer-events: none;">
  </a>
  

  这个方案依赖客户端对pointer-events属性的支持，iPhone邮件应用的新版本已兼容，可作为备选方案测试。

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