快捷導(dǎo)航

深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標右鍵菜單及禁止選擇復(fù)制

更新時間：2014年06月10日 08:51:03 作者：

這篇文章主要介紹了深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標右鍵菜單及禁止選擇復(fù)制,需要的朋友可以參考下

我記得在剛開始接觸動態(tài)HTML及JavaScript時就接觸過關(guān)于鼠標右鍵屏蔽的腳本代碼，當時這些代碼很多會用在防止瀏覽者未經(jīng)允許的復(fù)制網(wǎng)頁上的文字或者其他內(nèi)容，后來的實際應(yīng)用證明這種做法是不符合用戶體驗的，而且破解的方法也有很多，比如我曾經(jīng)寫過一篇文章講解如何解除網(wǎng)頁禁止復(fù)制的辦法。

由此可見，限制右鍵及復(fù)制是不明智的做法，但是今天我仍然要談?wù)勱P(guān)于禁止網(wǎng)頁復(fù)制、右鍵菜單的事兒，因為隨著網(wǎng)頁APP技術(shù)的發(fā)展，網(wǎng)頁應(yīng)用和桌面應(yīng)用之間的界限越來越模糊，有一些桌面程序?qū)嶋H上是由網(wǎng)頁配合JavaScript實現(xiàn)的，另外一些手機應(yīng)用也可以是由HTML5+JavaScript實現(xiàn)的，在這種情形下，限制右鍵就是有必要的了，因為作為APP來說，網(wǎng)頁的右鍵選擇文字及彈出菜單在大多數(shù)情況下顯得沒有必要了。

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

一、粗暴版的限制選擇復(fù)制或者禁止鼠標右鍵

我們先談?wù)勅绾未直┑南拗苹蛘呓篂g覽者復(fù)制網(wǎng)頁上的文字，正常的防止瀏覽者復(fù)制文字，我們肯定是想到禁用用戶的某些特定的操作，比如鼠標右鍵，選擇，復(fù)制等等，而這些操作對應(yīng)了相應(yīng)的腳本事件，只要給這些事件加上一個方法，讓其返回false就可以“吃”掉這個操作了，一般粗暴的禁止復(fù)制的腳本代碼如下：

復(fù)制代碼代碼如下:

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()}
    }
}

為什么稱這個方法為粗暴版的呢？因為使用這個方法禁止鼠標右鍵后你會發(fā)現(xiàn)網(wǎng)頁上任何控件都無法右擊或者選擇了，網(wǎng)頁似乎成了死板的圖片，也許你會覺得無所謂，但是對于input、textarea文本框這類字符輸入控件就有很大的關(guān)系了，這些地方不能限制用戶的右鍵及選擇復(fù)制操作。

二、合理判斷要限制的HTML標簽元素

如何判斷當前處理的層所在的元素標簽?zāi)?，也就是說得到鼠標當前所在的HTML Tag，這里我們以oncontextmenu為例，其實在document.body.oncontextmenu傳入的函數(shù)有一個參數(shù)我們略去了，完整的寫法應(yīng)該是document.body.oncontextmenu=function(e){}這里的e是JavaScript中的Event事件對象，在IE中可能是通過window.event獲取的。通過這個事件對象可以獲取觸發(fā)事件時鼠標所在的HTML Tag，我們可以判斷是不是我們要忽略處理元素標簽，這里我提供一個函數(shù)如下：

復(fù)制代碼代碼如下:

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，這樣我們通過下面的代碼可以選擇性的屏蔽鼠標右鍵了：

復(fù)制代碼代碼如下:

document.body.oncontextmenu=function(e){
     return isTagName(e, ['A', 'TEXTAREA']);
}

三、JQuery版的選擇性屏蔽禁止文本選擇

同樣的對于其他的操作也可以選擇性的屏蔽，在JQuery支持的環(huán)境中我在StackOverflow找到了這么一篇文章《How to disable text selection using jQuery?》，雖然是講解的禁止選擇的，不過可以借鑒一下，具體代碼如下：

復(fù)制代碼代碼如下:

(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);

在使用上采取下面的代碼：

復(fù)制代碼代碼如下:

$(':not(input,select,textarea)').disableSelection();

這樣就可以除去input、select、textarea外禁止選擇了，這段代碼的技巧是除了采取selectstart外還給相關(guān)元素添加了某些特殊瀏覽器支持的CSS特性，這樣基本可以實現(xiàn)大多數(shù)瀏覽器的兼容，同時這段代碼還屏蔽了鍵盤按鍵選擇Ctrl+A和Ctrl+C，不得不佩服作者周到的考慮。

四、進一步完善：屏蔽鼠標點擊操作

我在測試這段代碼時遇到一個問題就是點擊除input、select、textarea外的元素時會全部選擇頁面，原文作者給出一個簡單的方法就是在使用代碼上附加.on('mousedown', false)，這樣就屏蔽了鼠標的單擊，使用代碼變成如下：

復(fù)制代碼代碼如下:

$(':not(input,select,textarea)').disableSelection().on('mousedown', false);

但是問題又來了，我發(fā)現(xiàn)采取上述代碼后，input,select,textarea也開始變得不正常起來，看樣子屏蔽mousedown的特性應(yīng)用到所有元素上了?，F(xiàn)在轉(zhuǎn)換一下思路，結(jié)合剛才我提出的方案，判斷event對象來實現(xiàn)選擇性屏蔽，我將代碼修正如下：

復(fù)制代碼代碼如下:

$(':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了，我們將這段代碼抽出為函數(shù)：

復(fù)制代碼代碼如下:

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版的選擇性屏蔽禁止鼠標右鍵

對于右鍵菜單，我們可以這樣處理：

復(fù)制代碼代碼如下:

$(document).bind("contextmenu",function(e){
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
        e.preventDefault();
        return false;
    }
    return true;
});

您可能感興趣的文章: