使用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;
     }
})

这样就能够实现禁止默认点击图片放大，还能够支持长按弹出保存图片识别二维码，目前没发现其余兼容问题。