移动端长按保存、取消长按保存图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 文章底部留言可联系作者。

一、长按保存图片

有时候会遇到在移动端长按保存图片的功能，微信打开h5页面可以实现，那么普通浏览器可能效果不一。

• safari浏览器在打开的时候效果不尽如人意，比如做一个保存二维码功能，我的iphone 11长按下图毫无反应。

• 微信浏览器打开效果如下图：

• UC浏览器打开效果如下图：

针对以上问题，可以使用css来解决 -webkit-touch-callout。

给图片添加-webkit-touch-callout属性

img {
    -webkit-touch-callout: default;
}

可以看到safari可以进行保存了。

二、取消长按保存图片

• 微信客户端、或者UC浏览器这样 可以使用 pointer-events （指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target）

img{
    pointer-events:none;
}

• 也可以尝试-webkit-touch-callout设置为none，但是效果不好

img {
    -webkit-touch-callout: none;
    user-select: none;
}