Use the pointer-events attribute to prohibit clicking on any img tag in Wechat on some mobile phones to enlarge it and display it in full screen

A recent h5 event project was going crazy over and over again, and I also encountered all kinds of strange problems in the middle. Yesterday, a colleague found that he could enlarge the logo on the page in WeChat, just before the launch, it would be fine, but on my page there is a picture (the path of base64) generated by a screenshot of canvas, and the effect that appears is Click on the picture, a black mask layer and loading gif appear on the screen, this must be solved. After all kinds of information on Baidu, I finally found a useful attribute pointer-events. Let me introduce this attribute first:

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

Default : auto

Applies to : all elements

Inheritance : yes

Animation : No

Calculated value : specified value

Value:

auto：

Has the same effect as when the pointer-events property is not specified. visiblepainted same value as on svg content

none：

Elements are never the target of mouse events. However, mouse events can point to descendant elements when their descendant element's pointer-events property specifies a different value, in which case the mouse event will fire the parent element's event listener at the capture or bubbling stage.

Other values ​​can only be applied to SVG.

illustrate:

Sets or retrieves when to be the target of the property event.

• Using pointer-eventsto prevent an element from being the target of mouse events does not necessarily mean that event listeners on the element will never fire. If an element descendant has a pointer-eventsproperty explicitly specified and allowed to be the target of mouse events, any events directed to that element will pass through the parent element during event propagation, triggering event listeners on it in an appropriate manner. Of course mouse activity that is on the screen on the parent element but not on the descendant element will not be captured by the parent and descendant elements (will go through the parent element to the element below it).
• The corresponding scripting feature is pointerEvents .

In short, the attribute value of this pointer-events is none to disable click events, so I set this attribute to all img tags. But here comes the problem. The image I generate needs to support long-pressing and saving in WeChat. There is also a page with image preview function. This attribute prohibits both long-pressing and clicking preview. Then the solution is to dynamically change an img The pointer-events property. The code that supports long press is as follows:

　　

$('.myImg').on({ 
    touchstart: function (e) { 
        $('.share_page').find('img').css('pointer-events','auto') //When the click triggers Put change pointe-events: auto; to support subsequent events. 
         timeOutEvent = setTimeout(function () { 
            $('.share_page').find('img').css('pointer-events','auto')// This line of code should be useless, I added it again to be on the safe side 
         }, 100); 
     }, 
     touchmove: function (e) { 
         clearTimeout(timeOutEvent); 
         timeOutEvent = 0; 

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

In this way, it is possible to prohibit the default click on the picture to enlarge, and it can also support long-press to pop up to save the picture to identify the QR code, and no other compatibility problems have been found so far.