ios下click失效小记

Rhinoceros
前言

今年都在写移动端页面,但是大多数用的都是框架,很少出现事件兼容问题。今天用原生写了个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具体差别,奈何今天没有时间了,明天补上。

后记

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

欢迎跟我一起挖坑、填坑,哈哈哈
image

阅读 503

以终为始

163 声望
3 粉丝
0 条评论

以终为始

163 声望
3 粉丝
宣传栏