• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
幸福341 显示全部楼层 发表于 2021-8-14 14:41:22 |阅读模式 打印 上一主题 下一主题
在移动端访问H5页面的时间,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们须要长按的时间也不保存图片。那该如何实现呢?下面给出3种办理方案。
方案一:使用 pointer-events:none
  1. img{
  2.    pointer-events:none;
  3. }
复制代码
亲测有效,实用于微信客户端的手机页面,图片被打开的情况.
方案二:全局属性
  1. *{
  2.    -webkit-touch-callout: none;
  3.   -webkit-user-select: none;
  4.   -moz-user-select: none;
  5.   -ms-user-select: none;
  6.   user-select: none;
  7. }
复制代码
-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。
user-select属性是css3新增的属性,用于设置用户是否能够选中文本。
方案三:加一层遮罩层  


图片上边加一层div雷同于遮罩层,如许图片就不会被点击,右击或长按也不会出现如图的图片另存为的选项了。  代码示比方下:
  1. <div class="imgbox">
  2.     <div class="imshar"></div>
  3.     <img src=""/>
  4. </div>
  5. <style>
  6. .imgbox{
  7.     position: relative;
  8.     width: 80%;
  9.     margin: 0 auto;
  10.     margin-top: 20px;
  11. }
  12. .imgbox .imshar{
  13.     position: absolute;
  14.     z-index: 100;
  15.     left: 0;
  16.     right: 0;
  17.     top: 0;
  18.     bottom: 0;
  19.     opacity: 0;
  20. }
  21. .imgbox img{
  22.     display: block;
  23.     width: 100%;
  24. }
  25. </style>
复制代码
到此这篇关于html5移动端禁止长按图片保存的实现的文章就先容到这了,更多相干html5禁止长按图片保存内容请搜索脚本之家以前的文章或继续浏览下面的相干文章,希望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作