阻止移动端浏览器点击图片浏览行为的几种方法

在一些移动端浏览器上,如果点击图片,会产生一个浏览图片的行为。

QQ没有这种默认行为,但是UC浏览器有。

如图:

UC浏览器打开这个链接,然后点击里面的一张图片,浏览图片的效果就出来了:

http://m.uczzd.cn/webapp/webview/article/news.html?app=uc-iflow&aid=16896094788778840579&cid=100&zzd_from=uc-iflow&uc_param_str=dnnivebichfrmintcpgieiwidsudpf&recoid=8989270661268403959&readId=11481314882011625661&rd_type=share&fontsize=100&dn=6147970652-15ed2cf4&ds=bTkwBR0dFF2w0psVctpj7FDpa6WcUGH4i07G8Zzjb%2BHRGw%3D%3D&ei=bTkwBTIdFnjJsp0ELuoVkr3oEyUyNCDTYRqLy7fIMTKCtRT%2Bnrm8bX7nq%2BxL0A%3D%3D&fr=iphone&ve=1.8.0.0&sv=appa&nt=2&gi=bTkwBfEdHrPW5cJN45sY7zjvCLbpdkpsVhyGkxu%2FKeS2rpg%3D&pf=44&tt_from=uc_btn&btifl=100&pagetype=share&refrd_id=5a92e5be22af60178a60c9de18bbb8d0&sn=16331856094196018889

点击前:                            点击图片后:

                                         

 

所以为了达到一致的效果,这种默认的浏览行为是需要被禁止的。

下面介绍几种方法:

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();

});

关于这里的click事件,其实也可以是touchend事件,但是不可以是touchstart和touchmove事件!

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

在此,希望你可以自己亲手做下实验。

posted @ 2015-12-03 20:33  Joy Ho  阅读(13071)  评论(0编辑  收藏  举报