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