禁止移动端点击图片出现预览的默认行为

在移动端开发中,某些设备会存在点击img标签,

图片呈现预览模式,但是我们没有给图片添加任何事件

这是移动端浏览器的默认行为,解决方式如下:

1、在img标签上添加 onclick="return false"

<img src="a.png" onclick="return false" />

2、图片用背景图的方式插入

background: url(a.png) no-repeat;

3、使用js事件阻止默认行为

var img = document.getElementById('img');
img.addEventListener('click', function(e){
   e.preventDefault(); 
})

另外可以用css方式解决:

img{ pointer-events: none; }

但是该方法会导致图片的点击事件失效

如果只是单纯展示图片,而没有什么交互的话,这个方法还是可以的~

原文地址:https://www.cnblogs.com/haishen/p/11039770.html