昨天做移动端的一个H5页面遮罩层(遮罩层是一个大的透明图), 指引用户用浏览器打开!当时是在chrome浏览器调测的,点击是没有问题的,本想大功告成!放到手机上一测试,乍看,没问题。一点遮罩层,来事了,只看到全屏的一大图片,然后什么也操作不了,尴尬了。。。
今天有些空余时间,把解决方法写一下,自己以后也能复习,哈哈,也许会给需要的小伙伴带来一些帮助呢。废话说多了,上点干货吧。
项目中使用了img标签,js用了vue
我的解决方法:点击的时候在img标签里加了个阻止默认行为的事件:
preventTouch(e) { e.stopPropagation(); e.preventDefault(); }
后面从网上也找到了其他解决方案:
1、1.在img元素上添加 onclick="return false"
<img src="./img/tip.png" onclick="return false" />
2、背景图的方式插入(这种是比较普遍的方式)
扫描二维码关注公众号,回复:
1939784 查看本文章
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。
这个。。网上有小伙伴说的,自己亲测,确实有点问题。希望小伙伴们可以自己测试下哈。