禁止微信長按保存圖片
阿新 • • 發佈：2017-07-15
ati position 做了 itl 其他 解決方案 bug pla 路徑
事情的經過是這樣的，有一天我去公司其他部門咨詢 鏈接底層服務的事情。正好當時他們部門的前端小夥伴遇到一個bug。這個bug是這樣的，在微信裏內嵌的H5頁面中有一個圖片。然而呢！圖片綁定了一個點擊事件。大家都知道，在手上訪問H5頁面的時候，長按圖片就會把圖片保存起來。為了能夠讓用戶體驗更好一些，我們需要長按的時候也不保存圖片。還能觸發點擊事件。當時他們咨詢我這Bug怎麽解決，我呢回去就圍繞事件這塊做了測試，也行當時沒用心，沒思考。結果呢，肯定是沒有解決掉。
今天在哪躺著回想之前的事情，想起來這個bug。突然間腦子閃現出解決方案了。
一、如何想要圖片不被保存
圖片上邊加一層div類似於遮罩層，這樣圖片就不會被點擊，右擊也不會出現如圖的圖片另存為。
二、對這層這招添加點擊事件處理相關邏輯
三、代碼如下
預覽路徑
http://runjs.cn/detail/iejtzrv4
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>禁止微信長按保存圖片</title> <style type="text/css"> .imag{ position: relative; width: 80%; margin: 0 auto; margin-top: 20px; } .imshar{ position: absolute; z-index: 100; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; } .imag img{ display: block; width: 100%; } </style> </head> <body> <div class="imag"> <div class="imshar" onclick="fn()"></div> <img src="http://images.cnblogs.com/cnblogs_com/xiaoxiaokun/1007663/o_xiaoxiaokun.png"/> </div> <script type="text/javascript"> function fn(){ alert("處理你想要處理的事情！不可以保存圖片") } </script> </body> </html>
總結：
其實做技術的時候我們要想一下，其他方案，不能糾結於事件處理，也行能用css與html就可以處理掉呢！只有做出來給用戶看不出問題就行啦！
加油吧！小夥伴們。
禁止微信長按保存圖片