事件委托之 ios

先说问题:底下的这张图是弹出的弹窗,上面需要绑定获取验证码,以及绑定手机号的事件。在安卓和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) ;

恩,完美~~~

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值