摘要：
　　之前给手机端做的弹层特效，一直没有注意一个问题：动态插入的元素绑定了click事件后在iphone果机中失效的问题。还好后来测试时发现问题了，然后在网上搜索了下方法，给目标元素添加一个手势cursor:pointer;就解决了问题......

今天来讲一个手机端常见的弹出层菜单特效中的坑。
效果图一： 效果图二： 目测这效果对看官们来说应该没什么压力，但不知道看官有没有碰到其中的坑。如果之前没有碰到过，那看官以后可要注意点哦！说不定哪天就掉坑中了。在进入正题之前，有必要对这个交互效果进行下分析。

一、弹出层菜单的交互分析

交互分析：
1、默认状态下，弹出层隐藏；
2、点击触发点时，弹出层显示出来；
3、选择完成后传值并隐藏弹出层菜单；
4、如果没有选择而是直接点击了半透明遮罩层，此时也应该隐藏弹出层。

分析完成后，看官们应该知道该怎么搞了吧。对于上面提到的半透明遮罩层，实现的方法不局限一种。可以利用:before伪对象的方法或者是新建空层来实现。为了节省篇幅，此处就不详细的写出该页面的完整源码了，只给出一个简单的示例demo重现下问题就行了。想体验的小伙伴拿出手机扫下面的二维码即可进入。二维码：

好像在手机上测试时都正常对吧，既然效果正常，那是不是就说明我们的工作完成了呢？

时间在一秒一秒的流逝......

直到某个壕拿着iphone6 plus果机扫描了上面的二维码，点击遮罩层时，弹出层并没有隐藏。于是，坑就出来了。

二、ios中click点击事件失效

奇怪呀！触发点用的是click事件，遮罩层也是click事件，如果说ios不支持click事件，那为什么会弹层呢？既然支持，那为何此处的遮罩层又不生效呢？？难道ios不支持动态元素的click事件？不应该呀，明明已用了支持动态的写法了呀！！！奇怪......

艺灵是百思不得其解，最后在网上搜索了下才解决了问题。原文地址：happycoder.net/solve-ios-safari-click-event-bug/ 。

三、解决方法

上面的原文中提供了4种解决方案。
方法一：​将click事件直接绑定到目标​元素上；
方法二：将目标​元素换成<a>或者button等可点击的​元素；
方法三：将click事件委托到​​​​​非document或body的​​父级元素上；
方法四：给​目标元素加一条样式规则cursor:pointer;；
看官在选择时需要根据自己的需求而定，艺灵选择了最后一种。

四、已解决问题

当艺灵给.pop-bg添加了一个手势cursor:pointer;后，ios上再点击遮罩层就就正常了。二维码：

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-12-22/473.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。