clip-path可屏蔽PC端裁剪区域鼠标事件，为何iOS端对:after伪元素失效？

问题原因 #

• 该现象是iOS Safari内核的已知兼容性问题：WebKit内核仅对clip-path的视觉渲染做裁剪，不会同步裁剪元素的事件响应区域，点击元素原始边界盒内的任意位置都会触发交互，PC端和安卓端主流浏览器的实现符合W3C规范，仅裁剪区域内的操作可触发事件。

可用修复方案 #

方案1：结合pointer-events限制响应范围（改动最小，优先推荐） #

1. 给设置了clip-path的元素添加pointer-events: none，屏蔽整个元素的默认事件响应
2. 给裁剪区域内需要响应事件的内容（包括伪元素）单独添加pointer-events: auto，仅开放这部分的事件权限
   对应你的代码修改示例：

.title {
  /* 原有属性全部保留，新增以下属性 */
  pointer-events: none;
}
.title:after {
  /* 原有属性全部保留，新增以下属性 */
  pointer-events: auto;
}

如果需要响应.title本身的裁剪区域事件，可在裁剪区域内新增一个和裁剪范围大小一致的绝对定位空元素，单独给该空元素设置pointer-events: auto承接事件即可。

方案2：JS手动校验点击位置（适用于复杂裁剪场景） #

如果方案1无法适配你的业务场景，可以在事件触发时手动判断点击坐标是否落在裁剪区域内，不符合条件就阻止事件生效：

const titleEl = document.querySelector('.title')
// 替换为你实际使用的polygon裁剪坐标，单位为元素自身尺寸的百分比
const clipPolygon = [[0, 20], [108, 20], [108, 50], [0, 50]]

titleEl.addEventListener('click', (e) => {
  const rect = titleEl.getBoundingClientRect()
  // 计算点击坐标相对于元素的百分比位置
  const x = (e.clientX - rect.left) / rect.width * 100
  const y = (e.clientY - rect.top) / rect.height * 100

  // 点在多边形内判断工具函数
  const isPointInPolygon = (point, polygon) => {
    let inside = false
    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
      const [xi, yi] = polygon[i]
      const [xj, yj] = polygon[j]
      const intersect = ((yi > point[1]) !== (yj > point[1])) 
        && (point[0] < (xj - xi) * (point[1] - yi) / (yj - yi) + xi)
      if (intersect) inside = !inside
    }
    return inside
  }

  if (!isPointInPolygon([x, y], clipPolygon)) {
    e.stopPropagation()
    e.preventDefault()
  }
})

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