头闻号

常州中浦化工有限公司

UV涂料|UV胶|其他油墨|合成橡胶型胶粘剂|室内涂料|清洁用具

首页 > 新闻中心 > 科技常识:阻止h5手机点击图片会有查看大图的功能
科技常识:阻止h5手机点击图片会有查看大图的功能
发布时间:2024-10-04 18:35:51        浏览次数:3        返回列表

今天小编跟大家讲解下有关阻止h5手机点击图片会有查看大图的功能 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关阻止h5手机点击图片会有查看大图的功能 的相关资料,希望小伙伴们看了有所帮助。

问题现象:

在H5页面,多次点击img标签时,会弹出当前的图片(效果类似查看),再点击,恢复。只是部分手机点击图片会出现只看该图的功能,这个是手机自己浏览器自带的功能,这个时候只要将图片的冒泡冒泡阻止掉就可以了,或者使用css样式属性pointer-events也可以解决。

解决:

1 css设置

img{ pointer-events: none; }

这种方式可以解决这个问题,但是当如果你在此时的img上绑定点击事件,点击图片时这个事件将不会被触发。这种情况可以使用一个带点击事件的元素包裹这个img解决。

2 js阻止浏览器默认行为

imgEles.addEventListener('click',function(e){  e.preventDefault();});

3.将图片显示改为背景图显示

来源:爱蒂网