移動端長按儲存、取消長按儲存圖片

一、長按儲存圖片

有時候會遇到在移動端長按儲存圖片的功能，微信開啟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;
}
複製程式碼