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具体差异，奈何今天没有时间了，明天补上。

后记

但愿将来某一天，某家浏览器一统天下，解放咱们这些前端狗。哈哈哈

欢迎跟我一块儿挖坑、填坑，哈哈哈