preface

Recently I wrote a poster distribution certificate requirement. The user information is displayed as the server interface request, and the rest is displayed as IMG images. In the test scenario, it was found that long press the page to save the image, but the image saved is only IMG image, and there is no overall rendering of the information returned by the server, so consider to disable the function of long press to save the image. Make the following records based on this

The first method

Add CSS attribute to img tag. My poster connection is distributed through wechat, so direct access in wechat is effective, and also comes into effect through the test of mobile phone’s built-in browser.

img {
  pointer-events:none;
}
Copy the code

The second way

-webkit-touch-callout this CSS property disables the default callout display, which is the notification that occurs when an element is touched and held down.

When you hold down a target element on iOS, Safari displays a callout information about the link. The webkit-touch-Callout property allows you to disable this behavior. However, it is a non-standard property and is not recommended

body {
  -webkit-touch-callout: none
}
Copy the code

The third way

Use the background image mode, the original use of IMG tag to achieve the background image, can avoid long press to save the image operation.

Fourth method

Add a mask to the IMG image layer and set the opacity to 0 so that the image will not be clicked and there will be no long press to save the image.