ios下click失效小记

前言

今年都在写移动端页面，但是大多数用的都是框架，很少出现事件兼容问题。今天用原生写了个ios的页面，事件兼容花了约120'，必须要记录一下。

click事件兼容

正常解决ios上click事件失效方法有这几个方法：

• 添加cursor: pointer;这个属性（主要针对div、span）等不可点击的元素
• 把目标元素改成a、button标签
• 把click事件换成touchstart或touchend事件，（配合使用e.preventDefault）
• ​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上

我本身使用的就是事件委托，但挨个试了，依旧没有效果，想到家里的娃娃，泪奔~。
但是本着一个伪程序媛bug没有改完怎么能下班的精神，还是继续找原因。

分析方法

• 常用click事件失效解决方法 —— 无效
• a 标签直接点击 —— 正常
• 目标元素换成a标签 —— 无效

这样下来，只能是我的方法可能存在某些问题，继续分析：

• 改成事件捕获 —— 无效
• 改成事件冒泡 —— 无效
• 部分事件捕获部分冒泡 + 事件一开始先弹alert —— alert正常弹出

问题找到了，肯定某行代码报错了，一行一行找。
最后问题是：我用event对象中的path属性，但是在safari中为undefined
解决方案：

const path = event.path || (event.composedPath && event.composedPath());

在fireFox下好像也有这个问题，我没有亲测，不确定。

本来想查Android和iphone下event具体差别，奈何今天没有时间了，明天补上。

后记

希望未来某一天，某家浏览器一统天下，解放我们这些前端狗。哈哈哈

欢迎跟我一起挖坑、填坑，哈哈哈