如何阻止移動端瀏覽器點(diǎn)擊圖片瀏覽
在一些移動端瀏覽器上，如果點(diǎn)擊圖片，會產(chǎn)生一個瀏覽圖片的行為。
QQ沒有這種默認(rèn)行為，但是UC瀏覽器有。
所以為了達(dá)到一致的效果，這種默認(rèn)的瀏覽行為是需要被禁止的。
下面介紹幾種方法：
1.在img元素上添加 onclick="return false"
<img src="a.png" onclick="return false" />
2.圖片用背景圖的方式插入
background:url(a.png) norepeat center;
3.使用js事件阻止默認(rèn)行為的方法，這里需要注意哦！
var img = document.getElementById('banner');
img.addEventListener('click',function(e){
e.preventDefault();
});
關(guān)于這里的click事件，其實(shí)也可以是touchend事件，但是不可以是touchstart和touchmove事件！
因?yàn)槭褂胻ouchstart和touchmove事件的時候，假如頁面頂部有個超級大的banner圖，那么當(dāng)橫屏顯示或者類似于ipad等屏幕寬度大于高度的情況下，整個banner圖都占滿了屏幕，這個時候頁面沒法滑動。因?yàn)槟阌胻ouchstart和touchmove禁止掉了圖片的默認(rèn)行為，所以手指怎么滑動，頁面都沒反應(yīng)的。剛好這個滑動的行為觸發(fā)了touchstart和touchmove。
4.通過 CSS3 屬性實(shí)現(xiàn)
img {
pointer-events: none;
}
這樣設(shè)置會讓img標(biāo)簽的點(diǎn);事件失效，如果需要點(diǎn)擊保留事件，需要添加父元素處理點(diǎn)擊事件。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫猜拳游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
小程序webView實(shí)現(xiàn)小程序內(nèi)嵌H5頁面的全過程
在微信小程序中內(nèi)嵌H5頁面是一種常見的需求,因?yàn)镠5頁面具有靈活性和跨平臺性,可以彌補(bǔ)小程序原生代碼的不足,這篇文章主要給大家介紹了關(guān)于小程序webView實(shí)現(xiàn)小程序內(nèi)嵌H5頁面的相關(guān)資料,需要的朋友可以參考下2024-07-07
最近在做項(xiàng)目的時候,遇到了有四舍五入保留兩位的需求,當(dāng)時不假思索的直接使用了js原生的toFixed方法,結(jié)果出現(xiàn)了問題,這篇文章主要給大家介紹了關(guān)于JS中toFixed()方法四舍五入精度問題的相關(guān)資料,需要的朋友可以參考下2021-10-10
純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例
這篇文章主要介紹了純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了js利用拖放實(shí)現(xiàn)添加刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
學(xué)習(xí)使用bootstrap的modal和carousel
這篇文章主要教大家學(xué)會用bootstrap的modal和carousel,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了原生JS層疊輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
跨標(biāo)簽頁通信是指在瀏覽器中的不同標(biāo)簽頁之間進(jìn)行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家整理了幾個常見的跨標(biāo)簽頁通信方式,感興趣的小伙伴可以了解下2023-10-10
本篇文章主要介紹了詳解Javascript獲取緩存和清除緩存API，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
JS+CSS實(shí)現(xiàn)TreeMenu二級樹形菜單完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)TreeMenu二級樹形菜單,以完整實(shí)例形式較為詳細(xì)的分析了JS二級樹形菜單的節(jié)點(diǎn)元素操作技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09