今天小编跟大家讲解下有关阻止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.将图片显示改为背景图显示
来源:爱蒂网