内嵌h5，禁止长按图片保存-CSDN博客

本文链接：https://blog.csdn.net/weixin_44326389/article/details/118934146

1.pointer-events:none

img{
   pointer-events:none;
}
①适用于微信客户端的手机页面，图片被打开的情况

②缺点：会禁止掉点击事件。所以当图片有点击事件的时候，给有点击事件的图片设置pointer-events:auto;那么这个图片又可以长按保存了。
 解决办法：建议外边嵌套一层div，在div上绑定事件。

img{
   user-select:none;
   -webkit-touch-callout:none;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
}
①-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。

②user-select属性是css3新增的属性，用于设置用户是否能够选中文本。

③缺点：安卓机器上可能不生效。

3.加一层遮罩层

图片上边加一层div类似于遮罩层，这样图片就不会被点击，右击或长按也不会出现如图的图片另存为的选项了。
<div class="imgBox">
    <div class="imgMask"></div>
    <img src="xx.png"/>
</div>
<style>
 .imgBox{
    position: relative;
    width: 100%;
    margin: 0 auto;
      .imgMask{
	    position: absolute;
	    z-index: 100;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    opacity: 0;
	  }
	  img{
		  display: block;
		  width: 100%;
	 }
}
</style>

4.img统一用background实现。