阻止移動端瀏覽器點擊圖片瀏覽行為的幾種方法


在一些移動端瀏覽器上,如果點擊圖片,會產生一個瀏覽圖片的行為。

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。

在此,希望你可以自己親手做下實驗。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM