我記得在剛開始接觸動態HTML及JavaScript時就接觸過關于鼠標右鍵屏蔽的腳本代碼，當時這些代碼很多會用在防止瀏覽者未經允許的復制網頁上的文字或者其他內容，后來的實際應用證明這種做法是不符合用戶體驗的，而且破解的方法也有很多，比如我曾經寫過一篇文章講解如何解除網頁禁止復制的辦法。
由此可見，限制右鍵及復制是不明智的做法，但是今天我仍然要談談關于禁止網頁復制、右鍵菜單的事兒，因為隨著網頁APP技術的發展，網頁應用和桌面應用之間的界限越來越模糊，有一些桌面程序實際上是由網頁配合JavaScript實現的，另外一些手機應用也可以是由HTML5+JavaScript實現的，在這種情形下，限制右鍵就是有必要的了，因為作為APP來說，網頁的右鍵選擇文字及彈出菜單在大多數情況下顯得沒有必要了。
接下來介紹的可能只包含某一方面的代碼，但是我相信大家一定能夠舉一反三:-)
一、粗暴版的限制選擇復制或者禁止鼠標右鍵
我們先談談如何粗暴的限制或者禁止瀏覽者復制網頁上的文字，正常的防止瀏覽者復制文字，我們肯定是想到禁用用戶的某些特定的操作，比如鼠標右鍵，選擇，復制等等，而這些操作對應了相應的腳本事件，只要給這些事件加上一個方法，讓其返回false就可以“吃”掉這個操作了，一般粗暴的禁止復制的腳本代碼如下：
window.onload = function() {
with(document.body) {
oncontextmenu=function(){return false}
ondragstart=function(){return false}
onselectstart=function(){return false}
onbeforecopy=function(){return false}
onselect=function(){document.selection.empty()}
oncopy=function(){document.selection.empty()}
}
}
為什么稱這個方法為粗暴版的呢？因為使用這個方法禁止鼠標右鍵后你會發現網頁上任何控件都無法右擊或者選擇了，網頁似乎成了死板的圖片，也許你會覺得無所謂，但是對于input、textarea文本框這類字符輸入控件就有很大的關系了，這些地方不能限制用戶的右鍵及選擇復制操作。二、合理判斷要限制的HTML標簽元素
如何判斷當前處理的層所在的元素標簽呢，也就是說得到鼠標當前所在的HTML Tag，這里我們以oncontextmenu為例，其實在document.body.oncontextmenu傳入的函數有一個參數我們略去了，完整的寫法應該是document.body.oncontextmenu=function(e){}這里的e是JavaScript中的Event事件對象，在IE中可能是通過window.event獲取的。通過這個事件對象可以獲取觸發事件時鼠標所在的HTML Tag，我們可以判斷是不是我們要忽略處理元素標簽，這里我提供一個函數如下：
var isTagName = function(e, whitelists) {
e = e || window.event;
var target = e.target || e.srcElement;
Array.prototype.contains = function(elem)
{
for (var i in this)
{
if (this[i].toString().toUpperCase() == elem.toString().toUpperCase()) return true;
}
return false;
}
if (whitelists && !whitelists.contains(target.tagName)) {
return false;
}
return true;
};
這里的e是事件對象event，target是事件對象所引用的元素對象，當然這里兩個變量都采取了兼容IE的寫法，具體可以參考《How can I make event.srcElement work in Firefox and what does it mean?》；這里的whitelists是白名單HTML元素標簽Tag名，比如['INPUT', 'TEXTAREA']，表示將輸入文本框input和textarea加入判斷，如果當前事件元素是的話就返回true，這樣我們通過下面的代碼可以選擇性的屏蔽鼠標右鍵了：
document.body.oncontextmenu=function(e){
return isTagName(e, ['A', 'TEXTAREA']);
}
三、JQuery版的選擇性屏蔽禁止文本選擇
同樣的對于其他的操作也可以選擇性的屏蔽，在JQuery支持的環境中我在StackOverflow找到了這么一篇文章《How to disable text selection using jQuery?》，雖然是講解的禁止選擇的，不過可以借鑒一下，具體代碼如下：
(function($){
$.fn.ctrlCmd = function(key) {
var allowDefault = true;
if (!$.isArray(key)) {
key = [key];
}
return this.keydown(function(e) {
for (var i = 0, l = key.length; i < l; i++) {
if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
allowDefault = false;
}
};
return allowDefault;
});
};
$.fn.disableSelection = function() {
this.ctrlCmd(['a', 'c']);
return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'})
.bind('selectstart', false);
};
})(jQuery);
在使用上采取下面的代碼：
$(':not(input,select,textarea)').disableSelection();
這樣就可以除去input、select、textarea外禁止選擇了，這段代碼的技巧是除了采取selectstart外還給相關元素添加了某些特殊瀏覽器支持的CSS特性，這樣基本可以實現大多數瀏覽器的兼容，同時這段代碼還屏蔽了鍵盤按鍵選擇Ctrl+A和Ctrl+C，不得不佩服作者周到的考慮。
四、進一步完善：屏蔽鼠標點擊操作
我在測試這段代碼時遇到一個問題就是點擊除input、select、textarea外的元素時會全部選擇頁面，原文作者給出一個簡單的方法就是在使用代碼上附加.on('mousedown', false)，這樣就屏蔽了鼠標的單擊，使用代碼變成如下：
$(':not(input,select,textarea)').disableSelection().on('mousedown', false);
但是問題又來了，我發現采取上述代碼后，input,select,textarea也開始變得不正常起來，看樣子屏蔽mousedown的特性應用到所有元素上了?，F在轉換一下思路，結合剛才我提出的方案，判斷event對象來實現選擇性屏蔽，我將代碼修正如下：
$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
var event = $.event.fix(e);
var elem = event.target || e.srcElement;
if (elem.tagName.toUpperCase() != 'TEXTAREA' && elem.tagName.toUpperCase() != 'INPUT') {
e.preventDefault();
return false;
}
return true;
});
這樣textarea和input就不會限制mousedown了，我們將這段代碼抽出為函數：
function jQuery_isTagName(e, whitelists) {
e = $.event.fix(e);
var target = e.target || e.srcElement;
if (whitelists && $.inArray(target.tagName.toString().toUpperCase(), whitelists) == -1) {
return false;
}
return true;
}
$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
e.preventDefault();
return false;
}
return true;
});
五、JQuery版的選擇性屏蔽禁止鼠標右鍵
對于右鍵菜單，我們可以這樣處理：
$(document).bind("contextmenu",function(e){
if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
e.preventDefault();
return false;
}
return true;
});
