背景：
最近我们的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其他浏览器未做测试

其他版本的微信未做测试