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

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

转载于:https://www.cnblogs.com/xunhuang/p/8965975.html