網頁中禁用右鍵複製功能

2018-12-13 17:48:00
小熊
原創
145
摘要:有時候,我們看到優秀文章、素材,忍不住就想複製一下併佔爲己有。但是往往事與願違,我們常常髮現怎麽都無法使用鼠標右鍵。這篇文章教你來揭開這神秘麵紗。

有時候,我們看到優秀文章、素材,忍不住就想複製一下併佔爲己有。但是往往事與願違,我們常常髮現怎麽都無法使用鼠標右鍵。這篇文章教你來揭開這神秘麵紗。

百度文庫、豆瓣等這些專業在線互動式文檔分享平颱就不説瞭,鼓勵大傢原創、分享嘛,也尊重大傢知識産權。然後常規的網頁不能複製,無非是禁用瞭鼠標右鍵功能。

鼠標右鍵的禁用,有兩種方式:

  1. CSS禁用法。

  2. Javascript禁用法。

一.CSS法禁用右鍵選中

user-select:none |text| all | element

默認值:text

適用於:除替換元素外的所有元素

繼承性:無

動畵性:否

計祘值:指定值

取值

none:文本不能被選擇

text:可以選擇文本

all:當所有內容作爲一箇整體時可以被選擇。如果雙擊或者在上下文上點擊子元素,那麽被選擇的部分將是以該子元素曏上迴遡的最高祖先元素。

element:可以選擇文本,但選擇範圍受元素邊界的約束。

説明

設置或檢索是否允許用戶選中文本。

IE6-9不支持該屬性,但支持使用標籤屬性 onselectstart="return false;" 來達到 user-select:none 的效果;Safari和Chrome也支持該標籤屬性;直到Opera12.5仍然不支持該屬性,但和IE6-9一樣,也支持使用私有的標籤屬性 unselectable="on" 來達到 user-select:none 的效果;unselectable 的另一箇值是 off;除Chrome和Safari外,在其牠瀏覽器中,如果將文本設置爲 -ms-user-select:none;,則用戶將無法在該文本塊中開始選擇文本。不過,如果用戶在頁麵的其他區域開始選擇文本,則用戶仍然可以繼續選擇將文本設置爲 -ms-user-select:none; 的區域文本;對應的腳本特性爲userSelect。

例子:

.box
{   
 -webkit-user-select: none;  
 -moz-user-select: none;  
 -ms-user-select: none;   
 user-select: none;
}
<div class="box" onselectstart="return false;" unselectable="on">
    這是測試數據
</div>

二.Javascript法

1.方法一

<script language="Javascript"> 
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false"); 
</script>

2.方法二

<body oncontextmenu="event.returnValue=false" onselectstart="event.returnValue=false">

3.另外,也可以使用event.preventDefault() 方法來阻止oncontextmenu() 還有onselectstart()。

document.oncontextmenu=function(evt){
  evt.preventDefault();
}
document.onselectstart=function(evt){
 evt.preventDefault();
};

最後編輯:小熊 於 2018-12-17 16:49:52

關鍵字

發錶評論
評論通過審核後顯示。
文章分類
聯繫我們
聯繫人: 小熊
電話: 18595829039
Email: admin@cnsite.org
QQ: 929410000
微信: itseor
微博: itseoer