使用pointer-events屬性，禁止部分手機微信裏任何img標籤點擊放大全屏顯示

最近一個h5活動的項目，翻來覆去要作瘋了，中途也遇到了千奇百怪的問題。昨天，上線的前一刻某同事發現 他在微信裏能夠把頁面裏的logo放大，若是隻是這樣也還好，可是我頁面裏有用canvas截圖生成的一張圖片（base64的路徑）而後出現的效果就是點擊圖片，屏幕出現黑色遮罩層和loading加載gif，這個確定就得解決了。通過百度各類資料，終於找到了一個有用的屬性pointer-events，先介紹一下這個屬性：

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默認值：auto

適用於：全部元素

繼承性：有

動畫性：否

計算值：指定值

取值：

auto：

與pointer-events屬性未指定時的表現效果相同。在svg內容上與visiblepainted值相同

none：

元素永遠不會成爲鼠標事件的target。可是，當其後代元素的pointer-events屬性指定其餘值時，鼠標事件能夠指向後代元素，在這種狀況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。

其餘值只能應用在SVG上。

說明：

設置或檢索在什麼時候成爲屬性事件的target。

• 使用pointer-events來阻止元素成爲鼠標事件目標不必定意味着元素上的事件偵聽器永不會觸發。若是元素後代明確指定了pointer-events屬性並容許其成爲鼠標事件的目標，那麼指向該元素的任何事件在事件傳播過程當中都將經過父元素，並以適當的方式觸發其上的事件偵聽器。固然位於屏幕上在父元素上但不在後代元素上的鼠標活動都不會被父元素和後代元素捕獲（將會穿過父元素而指向位於其下面的元素）。
• 對應的腳本特性爲pointerEvents。

 

簡單來講，這個pointer-events的屬性值爲none能夠禁止點擊事件，因此我就給全部的img標籤設置了這個屬性。可是問題來了，我生成的圖片是須要支持在微信里長按保存的還有一個頁面有圖片預覽的功能，這個屬性把長按和點擊預覽都禁止了，而後解決思路就是動態改變某個img的pointer-events屬性。支持長按的代碼以下：

 

實際代碼：

$('.myImg').on({
    touchstart: function (e) {
        $('.share_page').find('img').css('pointer-events','auto') //點擊觸發時把改變pointe-events：auto；使支持後續事件。
         timeOutEvent = setTimeout(function () {
            $('.share_page').find('img').css('pointer-events','auto')//這行代碼應該是沒用的，保險起見又加了一次
         }, 100);
     },
     touchmove: function (e) {
         clearTimeout(timeOutEvent);
         timeOutEvent = 0;

     },
     touchend: function () {
         clearTimeout(timeOutEvent);
         return false;
     }
})

這樣就能夠實現禁止默認點擊圖片放大，還能夠支持長按彈出保存圖片識別二維碼，目前沒發現其餘兼容問題。