深入探討JavaScript、JQuery屏蔽網頁滑鼠右鍵選單及禁止選擇複製_javascript技巧

我記得在剛開始接觸動態HTML及JavaScript時就接觸過關於滑鼠右鍵屏蔽的腳本程式碼，當時這些程式碼很多會用在防止瀏覽者未經允許的複製網頁上的文字或其他內容，後來的實際應用證明這種做法是不符合使用者體驗的，而且破解的方法也有很多，例如我曾經寫過一篇文章講解如何解除網頁禁止複製的辦法。

由此可見，限制右鍵及複製是不明智的做法，但是今天我仍然要談談關於禁止網頁複製、右鍵選單的事兒，因為隨著網頁APP技術的發展，網頁應用和桌面應用之間的界線越來越模糊，有些桌面程式其實是由網頁配合JavaScript實現的，另外一些手機應用程式也可以是由HTML5 JavaScript實現的，在這種情況下，限制右鍵就是有必要的了，因為作為APP來說，網頁的右鍵選擇文字及彈出式選單在大多數情況下顯得沒有必要了。

接下來介紹的可能只包含某一方面的程式碼，但我相信大家一定能夠舉一反三:-)

一、粗暴版的限制選擇複製或禁止滑鼠右鍵

我們先談談如何粗暴的限製或禁止瀏覽者複製網頁上的文字，正常的防止瀏覽者複製文字，我們肯定是想到禁用用戶的某些特定的操作，比如鼠標右鍵，選擇，複製等等等，而這些操作對應了對應的腳本事件，只要給這些事件加上一個方法，讓其返回false就可以「吃」掉這個操作了，一般粗暴的禁止複製的腳本代碼如下：

複製程式碼 程式碼如下:

window.onload = function() {
  {
      oncontextmenu=function(){return false}
      ondragstart=function(){return false} orecopy=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>var isTagName = function(e,elist)(e,, whitelist >      e = e || window.event;

      var target = e.target || e.srcElement;

             for (var i in this)
           {
              .       }
           return false;
        }
      if (whitelists && !whitelists.contains(target.tagName)) {
    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;

  >       key = [key];
       key = [key];
    }

    return this.keydown(function(e) {
    re 
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {        };
        return allowDefault;
    });
};

 
$.fn.disableSelection = function() {

]);

    return this.attr('unselectable', 'on')
                          '- moz-user-select':'none',
                     '-o-user-select   khtml-user-select':'none',
                     '-webkit- user-select':'none',
                     '-ms-user-select    lect':'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的特性應用到所有元素上了。現在轉換一下思路，結合剛才我提出的方案，判斷event物件來實現選擇性屏蔽，我將程式碼修正如下：

複製程式碼 程式碼如下:

$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
  var event  var event = $.event.fix(e);
    var elem = event.target || e.srcElement;
    if (elem.tagName.toUpperCase() != 'TEXTAREA' && elem.tag. != 'INPUT') {
        e.preventDefault();
        return false;
  put就不會限制mousedown了，我們將這段程式碼抽出為函數：

複製程式碼

程式碼如下:function jQuery_isTagName(e, whitelists) {      e = $.event.fix(e);

      var target = e.target e.srcmm        return false;
      🎜>  not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
        e.preventDefault();
        return false;
    }
    return true
;
五、JQuery版的選擇性屏蔽禁止滑鼠右鍵


對於右鍵選單，我們可以這樣處理：

複製程式碼

程式碼如下:

程式碼如下:

    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) { . return false;    }    return true;

});