Shulou(Shulou.com)06/01 Report--

This article Xiaobian for you to introduce in detail "how to prohibit long-click picture saving in html5 mobile", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to prohibit long-click picture saving in html5 mobile" can help you solve your doubts.

When visiting the H5 page on the mobile side, long pressing the picture will save the picture. In order to make the user experience better, we need to press the long button without saving the picture. So how to achieve it? Here are three solutions.

Option 1: use pointer-events:noneimg {pointer-events:none;}

Personal test is valid, suitable for Wechat client phone page, the picture is opened.

Scenario 2: global attributes * {- webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}

-webkit-touch-callout is mainly used to prohibit long-press menus. Of course, browsers for the webkit kernel.

The user-select property is a new property added by css3 and is used to set whether users can select Chinese text.

Plan 3: add a mask layer

Adding a layer of div on top of the image is similar to a mask layer, so that the image will not be clicked, and the right-click or long-click option will not appear to save the image as shown in the figure. The code example is as follows:

.imgbox {position: relative; width: 80%; margin: 0 auto; margin-top: 20px;} .imgbox .imshar {position: absolute; z-index: 100; left: 0; right: 0; top: 0; bottom: 0; opacity: 0;} .imgbox img {display: block; width: 100% } after reading this, the article "how to disable long-click image saving on html5 mobile" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to learn more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.