如何阻止移動端瀏覽器點擊圖片瀏覽
更新時間：2020年08月29日 16:57:49 作者：小猿筆記
這篇文章主要介紹了如何阻止移動端瀏覽器點擊圖片瀏覽,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
在一些移動端瀏覽器上，如果點擊圖片，會產生一個瀏覽圖片的行為。
QQ沒有這種默認行為，但是UC瀏覽器有。
所以為了達到一致的效果，這種默認的瀏覽行為是需要被禁止的。
下面介紹幾種方法：
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禁止掉了圖片的默認行為，所以手指怎么滑動，頁面都沒反應的。剛好這個滑動的行為觸發(fā)了touchstart和touchmove。
4.通過 CSS3 屬性實現
img {
pointer-events: none;
}
這樣設置會讓img標簽的點;事件失效，如果需要點擊保留事件，需要添加父元素處理點擊事件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現右下角提示框的方法,實例分析了Jquery插件popup.js的具體用法,需要的朋友可以參考下2015-02-02
javascript每日必學之循環(huán)，本文的主要內容就是循環(huán)，死循環(huán)時進行bug調式，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了js組件SlotMachine實現圖片切換效果制作抽獎系統的相關資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了點擊更換背景顏色或圖片的js代碼，需要的朋友可以參考一下2013-06-06
div+css+js實現無縫滾動類似marquee無縫滾動兼容firefox
marquee無縫滾動想必大家都有見過，本文利用div+css+javascript也實現下類似的滾動且兼容firefox，喜歡的朋友可以參考下2013-08-08
這篇文章主要為大家詳細介紹了Javascript實現元素選擇器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了原生js仿淘寶網商品放大鏡效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
詳解JavaScript中js對象與JSON格式字符串的相互轉換
本篇文章主要介紹了JavaScript中js對象與JSON格式字符串的相互轉換，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
這篇文章主要給大家介紹了關于在ts文件中引入js模塊編寫聲明文件的寫法示例,TypeScript是JavaScript的超集,TypeScript會進類型檢查,需要的朋友可以參考下2023-08-08
本節(jié)主要介紹了javascript獲取函數形參個數的具體實現，需要的朋友可以參考下2014-07-07