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

正文

  最近在写移动端项目开的时候,在一个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();

});

结束

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,876评论 25 709
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,795评论 8 265
  • 托老板的福能来张家界也算是一个惬意的周末了,晚上吃多了负罪感爆棚,看完超级丹和老李的半决赛后,带着些许失落跟刘同学...
    小浣熊的自言自语阅读 196评论 0 0
  • 我一直秉持着过好自己的,不去打扰任何人的态度过了人生的四分之一。 我是个很怕打扰别人,也很别人打扰我的人。每个人有...
    清风or阅读 551评论 0 0