Web前端之路

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

2018-04-27  本文已影响543人  紫荆峰

正文

  最近在写移动端项目开的时候,在一个div中引用img标签。运行项目后,点击该图片的时候,会发现图片呈现预览模式,但是我们没有给图片添加任何的click事件,效果如下:
点击前:


nowShow.jpg

点击后:


afterShow.jpg

这是因为移动端浏览器的默认行为,那么该如何解决呢?

解决办法

1、在img元素上添加 onclick="return false"
<img src="a.png" onclick="return false" />
2、.图片用背景图的方式插入
background:url(a.png) norepeat center;
3、.使用js事件阻止默认行为的方法,这里需要注意哦!
var img = document.getElementById('banner');

img.addEventListener('click',function(e){

  e.preventDefault();

});

结束

  希望能逗大家有所帮助,谢谢!如有不解,请看原文

上一篇下一篇

猜你喜欢

热点阅读