In depth discussion of JavaScript JQuery to block the right mouse menu and prohibit the selection of copy

I remember at the beginning the contact dynamic HTML and JavaScript to contact about the right mouse button when blocking script code, the code at that time a lot of use in preventing visitors without permission of the copy the words on the page or other content, then the actual application prove that this approach is not in conformity with the user experience, but also has a lot of method of crack, such as I have written an article explaining how to remove web forbidding way.

Limit, therefore, right click and copy is unwise, but today I still have to talk about forbidden web copy, right-click menu, because with the development of the web APP technology, web application and desktop application has become increasingly blurred the boundaries between, there are some desktop application is actually a web page with JavaScript, other mobile applications can be implemented by the HTML + JavaScript, in this case, limit right is necessary, because as the APP, Right-click text and pop-up menus on web pages are unnecessary in most cases.

The following may contain only a certain aspect of the code, but I believe that you must be able to draw a conclusion :-)

One, rough version of the restrictions on the selection of copy or prohibit the right mouse button

Let's talk about how rough restrict or prohibit visitors copy the words on the page, a normal prevent visitors copy words, we must be think of disabled users certain operations, such as the right mouse button, select, copy, etc., and these operations corresponding to the corresponding script event, as long as add a method to these events, let it return false can "eat" out this operation, general rough forbidding script code is as follows:

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

Why is this method called the rough version? Because use this method to ban the right mouse button you will find that the web site after any controls can right-click or selection, web page seems to be a rigid pictures, maybe you will think doesn't matter, but for this kind of character input, textarea text box input control has a lot to do, these places do not limit users right-click and choose copy operation.

Second, reasonable judgment to limit the HTML tag elements

How to determine the current processing layer of the element Tag, get the mouse in the current HTML Tag that is to say, here we oncontextmenu, for example, is in the document. The body. The oncontextmenu incoming function has a parameter we omitted, complete writing should be the document. The body. The oncontextmenu = function (e) {} e here is the Event Event object in JavaScript, In IE it might be retrieved through window.event. Through this event object, we can get the HTML Tag where the mouse is when the event is triggered. We can determine whether we should ignore the processing of element tags. Here, I provide a function as follows:

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;
};

Here e is the event object, and the target is the element object referenced by the event object. Of course, both variables here are written in a way compatible with IE. For details, please refer to How can I make event.srcelement work in Firefox and what does it mean? ; Here the whitlist HTML element Tag Tag name, such as ['INPUT', 'TEXTAREA'], means to INPUT text box INPUT and TEXTAREA into the judgment, if the current event element is true, so we can selectively through the following code to block the right mouse button:

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

Three, JQuery version of the selective shielding prohibited text selection

Four, further improvement: blocking mouse click operation

One of the problems I encountered when testing this code was that clicking on elements other than input, select, and textarea would select all the pages. The author gave a simple method to attach "on" ('mousedown', false) to the code.

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

However, I found that the input,select, and textarea began to become abnormal after I adopted the above code. It seems that the mousedown feature was blocked and applied to all elements. Now I will change my thinking and judge the event object to achieve selective shielding based on the scheme I just proposed. I will modify the code as follows:

$(':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;
});

So that textarea and input do not restrict mousedown, we extract this code as a function:

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

Five, JQuery version of the selective shielding to prohibit the right mouse button

For the right-click menu, we can handle it like this:

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