ios click事件踩坑(低版本ios点击无反应)

为了兼容大部分的机型,使用h5+ css + js进行相关业务的静态页编写。
在自测手机上交互正常的页面,却有苹果手机的客户反应点击无反应,在拿了低版本苹果测试机之后,发现确实这样。但是更神奇的事情是,部分可以进行交互,部分不可以进行交互。

原因如下

当使用事件委托给【目标元素】添加 click 事件时,如果【代理元素】是 document或body,并且【目标元素】是默认不可点击的(如 div, span 等),此时click事件会失效。如果【目标元素】是可点击的(比如 button、a标签),此时click事件还是有效的。

解决方法

1、【代理元素】可以是【目标元素】的父级元素,document,body等,但【目标元素】必须为a或者button可点击的标签。

尽量使用touch事件或者tap事件,如果你需要click事件的延迟效果来达到某些交互,尽量把click事件绑定在a或者button可点击的标签上。

2、【代理元素】必须是【目标元素】的非document,body父级元素,【目标元素】可以是任意标签。

将click事件委托到非document或body的父级元素上。

3、【代理元素】可以是【目标元素】的父级元素,document,body等,【目标元素】可以是任意标签,但是要设置cursor: pointer;。

编写建议

出现上述点击事件失效的问题,让我们不得不体会到标签语义化的重要性,于是这里建议大家写代码时,【目标元素】多用a或者button可点击的标签,【代理元素】多用非document,body父级元素。

参考文章:
https://www.shuzhiduo.com/A/GBJr6pbqJ0/

猜你喜欢

转载自blog.csdn.net/qq_41867900/article/details/130123581
ios
今日推荐