移动端：阻止浏览器点击图片查看的几种方法

        昨天做移动端的一个H5页面遮罩层(遮罩层是一个大的透明图)， 指引用户用浏览器打开！当时是在chrome浏览器调测的，点击是没有问题的，本想大功告成！放到手机上一测试，乍看，没问题。一点遮罩层，来事了，只看到全屏的一大图片，然后什么也操作不了，尴尬了。。。

        今天有些空余时间，把解决方法写一下，自己以后也能复习，哈哈，也许会给需要的小伙伴带来一些帮助呢。废话说多了，上点干货吧。

               

项目中使用了img标签，js用了vue

我的解决方法：点击的时候在img标签里加了个阻止默认行为的事件：

preventTouch(e) {
  e.stopPropagation();
  e.preventDefault();
}

后面从网上也找到了其他解决方案：

1、1.在img元素上添加 οnclick="return false"

<img src="./img/tip.png" οnclick="return false" />

2、背景图的方式插入(这种是比较普遍的方式)

background:url(./img/tip.png) norepeat center;
background-size: cover;

3.使用js事件阻止默认行为的方法(用其他js框架写法可能有所不同，这里用个原生js写法吧)

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

注意：关于这里的click事件，其实也可以是touchend事件，但是不可以是touchstart和touchmove事件！

因为使用touchstart和touchmove事件的时候，假如页面顶部有个超级大的banner图，那么当横屏显示或者类似于ipad等屏幕宽度大于高度的情况下，整个banner图都占满了屏幕，这个时候页面没法滑动。因为你用touchstart和touchmove禁止掉了图片的默认行为，所以手指怎么滑动，页面都没反应的。刚好这个滑动的行为触发了touchstart和touchmove。

这个。。网上有小伙伴说的，自己亲测，确实有点问题。希望小伙伴们可以自己测试下哈。