阻止h5手机点击图片会有查看大图的功能

更新日期: 2019-11-03阅读: 3k标签: 手机

问题现象:

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


解决:

1 css设置

img{
   pointer-events: none; 
}

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


2 js阻止浏览器默认行为

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


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



链接: https://fly63.com/article/detial/6224

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!