vue安卓移动端,微信点击img被放大问题


在公众号里面嵌套的h5页面,我给img添加了点击事件,例如

<img  class="close-btn" src="./icons/close.png" @click="open">

但是当我再安卓机微信上测试的时候,会先放大图片至全屏,然后再执行我的点击事件,iOS没有问题,就很烦啊。查找了好久都没有什么文章,后来才发现,是因为微信Android客户端已经在底层支持了img标签自动放大的功能。

解决方法如下:

方法一:添加css属性,但是会让这个img的无法点击,你需要在这个img上再盖一层元素实现你的点击事件

//img css 
img{
pointer-events: none;
}

方法二:使用vue的prevent禁止原生事件

<img  @click.prevent=''  class="close-btn" src="./icons/close.png" @click.stop="open">

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注