企業號有一種消息類型叫保密消息，該類型消息有全屏水印、圖片水印、禁止分享至朋友圈、禁止選中文字等功能。
但是對於圖片，手機端默認長按時會觸發下載保存交互。
/*-webkit-touch-callout:none; /!* 禁用長觸彈出的下載圖片菜單 *!/*/
-webkit-user-select:none; /* 禁用長觸選擇文字等功能 */
首先想到的方案是通過JS實現，對touch實踐做處理。
|
1
|
window.ontouchstart =
function
(e) { e.preventDefault(); };
|
但是這個對於長的文章，滾動事件就失效了。所以此方案無效，但是如果只是某個div有需求，可以這樣處理。
其實這個可以通過CSS3的屬性去除。
|
1
|
img { pointer-events:
none
; }
|
如果只是對圖片禁止選中，長按圖片的時候不會有問題，但是如果是先選擇旁邊的文字，再覆蓋選取圖片，那圖片照樣會被copy出來。
禁止選中
|
1
2
|
-webkit-user-select:
none
;
/*禁用手機瀏覽器的用戶選擇功能 */
-moz-user-select:
none
;
|
這時候對文字禁止選中就沒有問題了，整篇文章不可以復制或保存。截屏的時候會帶有水印。
還有一招更甚，直接
|
1
|
*{ pointer-events:
none
; }
|
完美實現以上需求，完成。
企業號有一種消息類型叫保密消息，該類型消息有全屏水印、圖片水印、禁止分享至朋友圈、禁止選中文字等功能。
但是對於圖片，手機端默認長按時會觸發下載保存交互。
首先想到的方案是通過JS實現，對touch實踐做處理。
|
1
|
window.ontouchstart =
function
(e) { e.preventDefault(); };
|
但是這個對於長的文章，滾動事件就失效了。所以此方案無效，但是如果只是某個div有需求，可以這樣處理。
其實這個可以通過CSS3的屬性去除。
|
1
|
img { pointer-events:
none
; }
|
如果只是對圖片禁止選中，長按圖片的時候不會有問題，但是如果是先選擇旁邊的文字，再覆蓋選取圖片，那圖片照樣會被copy出來。
禁止選中
|
1
2
|
-webkit-user-select:
none
;
/*禁用手機瀏覽器的用戶選擇功能 */
-moz-user-select:
none
;
|
這時候對文字禁止選中就沒有問題了，整篇文章不可以復制或保存。截屏的時候會帶有水印。
還有一招更甚，直接
|
1
|
*{ pointer-events:
none
; }
|
完美實現以上需求，完成。
禁止點擊高亮選中：
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids,個人感覺是低版本的安卓，4.0以下 */