欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何阻止移動(dòng)端瀏覽器點(diǎn)擊圖片瀏覽

 更新時(shí)間：2020年08月29日 16:57:49   作者：小猿筆記  
這篇文章主要介紹了如何阻止移動(dòng)端瀏覽器點(diǎn)擊圖片瀏覽,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

在一些移動(dòng)端瀏覽器上，如果點(diǎn)擊圖片，會(huì)產(chǎn)生一個(gè)瀏覽圖片的行為。

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事件的時(shí)候，假如頁面頂部有個(gè)超級大的banner圖，那么當(dāng)橫屏顯示或者類似于ipad等屏幕寬度大于高度的情況下，整個(gè)banner圖都占滿了屏幕，這個(gè)時(shí)候頁面沒法滑動(dòng)。因?yàn)槟阌胻ouchstart和touchmove禁止掉了圖片的默認(rèn)行為，所以手指怎么滑動(dòng)，頁面都沒反應(yīng)的。剛好這個(gè)滑動(dòng)的行為觸發(fā)了touchstart和touchmove。

4.通過 CSS3 屬性實(shí)現(xiàn)

img {
pointer-events: none;
}

這樣設(shè)置會(huì)讓img標(biāo)簽的點(diǎn);事件失效，如果需要點(diǎn)擊保留事件，需要添加父元素處理點(diǎn)擊事件。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論