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

栏目: 编程语言 · 发布时间: 5年前

内容简介：在公众号里面嵌套的h5页面，我给img添加了点击事件，例如但是当我再安卓机微信上测试的时候，会先放大图片至全屏，然后再执行我的点击事件，iOS没有问题，就很烦啊。查找了好久都没有什么文章，后来才发现，是因为微信Android客户端已经在底层支持了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">

参考文章： https://blog.csdn.net/weixin_34362875/article/details/87621710

欢迎转载，转载需带着文章出处链接~~

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Redis开发与运维

付磊、张益军 / 机械工业出版社 / 2017-3-1 / 89.00

本书全面讲解Redis基本功能及其应用，并结合线上开发与运维监控中的实际使用案例，深入分析并总结了实际开发运维中遇到的“陷阱”，以及背后的原因，包含大规模集群开发与管理的场景、应用案例与开发技巧，为高效开发运维提供了大量实际经验和建议。本书不要求读者有任何Redis使用经验,对入门与进阶DevOps的开发者提供有价值的帮助。主要内容包括：Redis的安装配置、API、各种高效功能、客户端、持久化......一起来看看《Redis开发与运维》这本书的介绍吧!

码农工具