先说问题:底下的这张图是弹出的弹窗,上面需要绑定获取验证码,以及绑定手机号的事件。在安卓和pc上面均是正常的。但是在ios下面,完全没反应。
问题分析:
1、由于弹窗是在点击时候才出现的,所以页面刚开始渲染的时候,是没有弹窗的dom的。也就是说,这里牵扯一个动态渲染dom并为其绑定事件,
2、绑定事件的目标元素没有可点击属性,比如,div、span。如果是a、button,那么click事件还是有效的
事件委托: 目标元素的事件委托到父元素上,比如document,body等,其中父元素是可见的。
这推荐一篇个人觉得很值得学习的文章,摘自凌云之翼的: https://www.cnblogs.com/liugang-vip/p/5616484.htm
解决:
第一种、绑定事件的目标元素需要有可点击属性(a、button);
第二种、委托的父元素为非document、body元素,这个时候目标元素可以为任意元素;
第三种、如果委托的父元素是document、body,也可以给父元素设置:cursor: pointer 属性。这个是强制给元素加上可点击属性。
提示:上面的第三种方法,有个对体验很不友好的问题。就是点击页面的时候,页面会闪一下,整屏透明的蓝色背景。这个qa一般都是会当bug提出来的。不要问我怎么知道的,解决:给父元素加上下面这个属性
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) ;
恩,完美~~~