vue click ios11 点击第二次才有效,vue click ios11 点击第二次才有效

背景:
最近我们的vue项目部分弹窗按钮出现点击时候需要点击第二次的时候才会触发


设备:

系统:ios11.01(15A402)

微信版本:6.5.23

第一反应是我们的程序出了问题


1.@click对应的函数里面做了触发程序的过滤 例如:

<a  @click="function" /><img src="xx.jpg"/></a>

function(){
   if(true){return;}
   console.log("我是需要执行的程序,应该过滤,可能不会允许")
}

2.样式index问题

3.系统或者浏览器特定的bug,例如

IE8 a链接需要保护内容||a链接需要有非透明的背景


排查:

1.点击事件对应函数没有过滤执行判断

2.index设置比兄弟节点高

3.a包含了图片,包含了内容


对比

 环境对比:电脑,微信,安卓,ios10,ios11

              结果:只有ios11存在该问题

代码对比:有问题的按钮和没有问题的按钮

有问题按钮:a包含了图片,并且设置了display:block;

没问题按钮:a链接不包含任何内容,a链接背景是同级图片

调试:

           将有问题的按钮(包含图片的a链接)里面的图片移除,改成背景图片

结果:可以正常运行


得论:ios11包含img的alink不能包含图片


最终html代码:

 

<a href="javascript:;" v-bind:style="{backgroundImage:'url('+giftShowModel.btnBgImg+')',color:red}"  @click="topullInfor(0)"  class="bottom-alink" >
                    <!-- <img :src="giftShowModel.btnBgImg" class="show-gitt-model-btn"> -->
                    100
                  </a>

ios11其他浏览器未做测试

其他版本的微信未做测试


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆康永

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值