IOS中事件点击失效的解决办法

好久没有写文章了,年底了,太忙了。

对了,今年完成了人生中的一件大事,我结婚啦!!!

扯得有点远了,回归正题。

最近,在一个全兼容(PC+移动端)的项目中,遇到了一个十分棘手,蛮坑爹的问题。

那就是在IOS下,点击任意处关闭弹框。(这么easy的问题,还棘手???)

哈哈,让大家见笑了,WEB,Android都是正常的,可关闭的。

需求是点击任意处关闭弹框,为了照顾性能,所以采用了事件委托,为了整个页面JS的可维护性,可读性,所有事件都是委托在“document”上。

坑来了… IOS点击无法关闭弹框。

琢磨了好久,原来:

当使用事件委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div,span 等),此时 点击 事件会失效。

解决办法很简单:

1.将 click 事件直接绑定到目标元素(即.target)上;
2.将目标元素换成 a 或者 button 等可点击的元素;
3.将 click 事件委托到非 document 或 body 的父级元素上;
4.给目标元素加一条样式规则 cursor: pointer。

博主推荐后两种。博主推测在 safari 中,不可点击元素的点击事件是不会冒泡到父级元素的。通过添加 cursor: pointer 使得元素变成了可点击的了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注