如何阻止移動端瀏覽器點擊圖片瀏覽
更新時間：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標簽的點;事件失效，如果需要點擊保留事件，需要添加父元素處理點擊事件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了JavaScript編寫猜拳游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在微信小程序中內嵌H5頁面是一種常見的需求,因為H5頁面具有靈活性和跨平臺性,可以彌補小程序原生代碼的不足,這篇文章主要給大家介紹了關于小程序webView實現小程序內嵌H5頁面的相關資料,需要的朋友可以參考下2024-07-07
最近在做項目的時候,遇到了有四舍五入保留兩位的需求,當時不假思索的直接使用了js原生的toFixed方法,結果出現了問題,這篇文章主要給大家介紹了關于JS中toFixed()方法四舍五入精度問題的相關資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了純JS實現表單驗證實例,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了js利用拖放實現添加刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要教大家學會用bootstrap的modal和carousel,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了原生JS層疊輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
跨標簽頁通信是指在瀏覽器中的不同標簽頁之間進行數據傳遞和通信的過程,這篇文章為大家整理了幾個常見的跨標簽頁通信方式,感興趣的小伙伴可以了解下2023-10-10
本篇文章主要介紹了詳解Javascript獲取緩存和清除緩存API，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了JS+CSS實現TreeMenu二級樹形菜單,以完整實例形式較為詳細的分析了JS二級樹形菜單的節(jié)點元素操作技巧,非常簡單實用,需要的朋友可以參考下2015-09-09