移动端浏览器无法禁用DIV元素用户交互问题排查

一、修正CSS代码（解决iOS兼容性问题） #

你之前的CSS存在关键错误：touch-action的前缀写法错误，应为-webkit-touch-action而非-touch-action。同时需确保a标签和图片本身都应用相关属性——iOS对链接元素的事件处理优先级更高，仅设置父DIV无法完全生效。

正确CSS代码如下（替换.your-product-image-link为实际商品图片链接类名，WooCommerce默认类为.woocommerce-product-gallery__image a或.product-image-link）：

/* 禁用商品图片链接的交互与选中 */
.your-product-image-link,
.your-product-image-link img {
  pointer-events: none;
  touch-action: none;
  -webkit-touch-action: none; /* iOS 必需前缀 */
  -webkit-touch-callout: none; /* 禁用iOS长按弹出菜单 */
  -webkit-user-select: none; /* 禁用Safari选中 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; /* 明确显示默认光标，避免误导用户 */
}

二、JavaScript兜底方案（CSS无效时使用） #

若iOS上CSS仍不生效，可通过JavaScript直接阻止触摸和点击事件。将以下代码添加到主题functions.php（通过wp_enqueue_script）或自定义JS编辑器中：

静态页面场景 #

document.addEventListener('DOMContentLoaded', function() {
  const imageLinks = document.querySelectorAll('.your-product-image-link');
  imageLinks.forEach(link => {
    // 阻止点击事件
    link.addEventListener('click', e => {
      e.preventDefault();
      e.stopPropagation();
    });
    // 阻止触摸事件
    link.addEventListener('touchstart', e => {
      e.preventDefault();
      e.stopPropagation();
    });
    link.addEventListener('touchend', e => {
      e.preventDefault();
      e.stopPropagation();
    });
  });
});

动态加载场景（如无限滚动） #

若商品为动态加载，使用事件委托更可靠：

document.addEventListener('DOMContentLoaded', function() {
  // 阻止点击
  document.body.addEventListener('click', e => {
    if (e.target.closest('.your-product-image-link')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
  // 阻止触摸
  document.body.addEventListener('touchstart', e => {
    if (e.target.closest('.your-product-image-link')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
});

三、根源性解决方案（修改WooCommerce模板） #

若上述方案均无效，可直接修改WooCommerce模板移除图片的a标签：

1. 在子主题中创建woocommerce文件夹，复制WooCommerce原模板文件（如woocommerce/templates/single-product/product-image.php或archive-product.php）到该文件夹；
2. 找到包裹图片的<a>标签并删除，仅保留<img>元素；
3. 保存修改，商品图片将不再是可点击链接。

注意：必须使用子主题修改模板，避免WooCommerce更新时覆盖修改。

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