html5移动端禁止长按图片生存的实现

2024-11-2 22:27| 发布者: 8b79| 查看: 72| 评论: 0

摘要: 在移动端访问H5页面的时间，长按图片就会把图片生存起来，为了可以或许让用户体验更好一些，我们必要长按的时间也不生存图片。那该如何实现呢？下面给出3种解决方案。方案一：使用 pointer-events:none [code] img

在移动端访问H5页面的时间，长按图片就会把图片生存起来，为了可以或许让用户体验更好一些，我们必要长按的时间也不生存图片。那该如何实现呢？下面给出3种解决方案。

方案一：使用 pointer-events:none

[code] img{ pointer-events:none; } [/code]

亲测有用，适用于微信客户端的手机页面，图片被打开的环境.

方案二：全局属性

[code] *{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [/code]

-webkit-touch-callout主要用于禁止长按菜单。固然针对webkit内核的浏览器。

user-select属性是css3新增的属性，用于设置用户是否可以或许选中文本。

方案三：加一层遮罩层

图片上边加一层div雷同于遮罩层，如许图片就不会被点击，右击或长按也不会出现如图的图片另存为的选项了。代码示比方下：

[code] <div class="imgbox"> <div class="imshar"></div> <img src=""/> </div> <style> .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%; } </style>[/code]

到此这篇关于html5移动端禁止长按图片生存的实现的文章就先容到这了,更多相关html5禁止长按图片生存内容请搜刮脚本之家从前的文章或继承浏览下面的相关文章，盼望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/772143.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：canvas多重阴影发光效果实现下一篇：在HTML5 localStorage中存储对象的示例代码

账号		自动登录	找回密码
密码			立即注册

html5移动端禁止长按图片生存的实现

方案一：使用 pointer-events:none

方案二：全局属性

方案三：加一层遮罩层

相关分类

站长推荐 /6