圖片上面加個(gè)透明的div

樓上正解，我前幾天也遇到這個(gè)問(wèn)題了，就是這么解決的。

直接綁touchstart事件不行么？

這兩周安卓端的微信瀏覽器內(nèi)核的bug（特性），表現(xiàn)為 點(diǎn)擊 圖片時(shí) 圖片會(huì)全屏放大，正常情況下，應(yīng)該要調(diào)用微信提供的jsSDK才會(huì)有這效果

解決辦法

阻止圖片的點(diǎn)擊事件的默認(rèn)行為，是的，在目前安卓微信里，點(diǎn)擊圖片會(huì)全屏放大已經(jīng)變成了它的默認(rèn)行為
我們可以寫一個(gè)事件代理來(lái)阻止：

$(document).on('click', 'img', e => {
    e.preventDefault();
})

算是個(gè)坑。

---------------------------以下5月2日更新------------------------------------------
上述的解決方案有一個(gè)坑：

<a >
 <img src="xxxx.png">
</a>

當(dāng)圖片被a標(biāo)簽包裹的時(shí)候，你會(huì)驚喜的發(fā)現(xiàn)點(diǎn)擊后a不能跳轉(zhuǎn)了，就好像a標(biāo)簽的瀏覽器默認(rèn)行為被阻止了一樣
其實(shí)還是上面寫法的坑，我們?yōu)榱四茏柚箘?dòng)態(tài)渲染的img元素用了事件代理，由document代理的，所以點(diǎn)擊的時(shí)候e.preventDefault()阻止的其實(shí)是document的默認(rèn)行為，document是網(wǎng)頁(yè)中的老大，它的默認(rèn)行為就相當(dāng)是瀏覽器的所有默認(rèn)行為了。。。所以a鏈接點(diǎn)了也不會(huì)跳轉(zhuǎn)

這里最終解決辦法呢有下面3種，視情況可搭配使用：

一. 不用a的href跳轉(zhuǎn)，使用js跳轉(zhuǎn)（不推薦，像用戶使用富文本插入的html代碼就不行了）

二. 不用js，純使用css來(lái)阻止安卓微信的這一行為：

img {
    pointer-events: none;
}

不過(guò)這個(gè)也有它的副作用，使用后會(huì)讓直接綁定在img身上點(diǎn)擊事件失效，只能給img元素再包裹一層元素，把事件放到這個(gè)元素身上

三. 改進(jìn)下我們之前寫的事件代理：

// 遞歸搜索當(dāng)前元素所有父級(jí)，看是否包含有a標(biāo)簽且有href值
const searchIsHavaTagA = function (currentEle) {
    // 如果一直往上層找，到body還沒找到就說(shuō)明沒有了
    if (currentEle.nodeName === 'BODY') {
        return false;
    }
    let parent = currentEle.parentElement;
    if (parent.nodeName === 'A' && parent.getAttribute('href')) {
        return true;
    } else {
        return searchIsHavaTagA(parent);
    }
}
$(document).on('click', 'img', function (e) {
    try {
        // 父級(jí)里有a標(biāo)簽且href不為空的，不處理
        if (!searchIsHavaTagA(e.target)) {
            e.preventDefault();
        }
    } catch (error) {
        console.log('阻止圖片默認(rèn)事件失敗');
    }
                        
})