Delve into JavaScript, jquery screen, right mouse button menu, and no replication _javascript tips

I remember the scripting code for the right mouse button when I first came into contact with Dynamic HTML and JavaScript, many of which were used to prevent browsers from copying text or other content on the page without permission, and later practical applications proved to be inconsistent with the user experience. And there are a lot of ways to crack, such as I have written an article on how to remove the Web page to prohibit the copying method.

This shows that it is unwise to limit the right button and copy, but today I still want to talk about the ban on Web copy, right-click menu, because with the development of web App technology, Web application and desktop application of the line between increasingly blurred, Some desktop programs are actually implemented by Web pages in conjunction with JavaScript, and other mobile apps can be implemented by Html5+javascript, in which case restricting the right button is necessary because, as an app, The right mouse button selection text and pop-up menu in most cases seems unnecessary.

The next introduction may contain only one aspect of the code, but I believe that we can extrapolate:-)

A rough version of the restrictions choose to copy or disable the right mouse button

Let's talk about how to rudely restrict or disable the viewer from copying the text on the page. Normally prevent browsers from copying text, we must think of disabling some specific actions of the user, such as the right mouse button, select, copy, and so on, and these actions correspond to the corresponding script events, as long as these events plus a method, Let it return false to "eat" out of this operation, generally rude the scripting code to prohibit copying is as follows:

Copy Code code 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 do you call this method a rough version? Because you can use this method to prevent the right mouse button after you will find that any control on the page can not right-click or choose, the Web page seems to become a rigid picture, you may feel indifferent, but for input, textarea text box such as character input control has a great relationship, These places cannot restrict the user's right button and select the copy operation.

Second, reasonable judgment to limit the HTML tag elements

How to judge the element tag of the currently processed layer, that is, to get the HTML tag where the mouse is currently located, here we take oncontextmenu for example, In fact, the function passed in the Document.body.oncontextmenu has a parameter we omitted, the complete wording should be document.body.oncontextmenu=function (e) {} Here e is the event object in JavaScript, which may be obtained by window.event in IE. By using this event object to get the HTML tag that the mouse is in when the event is triggered, we can judge whether we want to ignore the processing element tag, here I provide a function as follows:

Copy Code code 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 and 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 Event,target is the event object referenced by the element object, of course, here two variables are adopted compatible with IE, specific reference to "how can I made event.srcelement work in Firefox and what Does it mean? The whitelists here is the whitelist HTML element tag tag name, such as [' Input ', ' TEXTAREA '], which means that input text box inputs and TEXTAREA are added to the judgment, Returns true if the current event element is the same, so that we can selectively screen the right mouse button through the following code:

Copy Code code as follows:

Document.body.oncontextmenu=function (e) {
Return Istagname (E, [' A ', ' TEXTAREA ']);
}

Third, the jquery version of the selective shielding prohibited text selection

The same for other operations can also be selective shielding, in the JQuery support environment I found in StackOverflow this article "How to disable text selection using JQuery", although the explanation of the prohibition of choice, However, you can draw on the specific code as follows:

Copy Code code as follows:

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

Take the following code on use:

Copy Code code as follows:

$ (': Not (Input,select,textarea) '). Disableselection ();

This can be removed from the input, select, textarea ban, the code is the trick in addition to taking Selectstart also to the relevant elements to add some special browser-supported CSS features, so that the basic implementation of the majority of browser compatibility, At the same time, this code also blocks keyboard keys to choose CTRL + A and CTRL + C, have to admire the author thoughtful consideration.

Four, further improve: screen mouse click operation

I was testing this code encountered a problem is to click in addition to input, select, TEXTAREA elements are all selected pages, the original author gives a simple way is to use the code to attach. On (' MouseDown ', false), This shields the mouse from clicking, and the code becomes as follows:

Copy Code code as follows:

$ (': Not (Input,select,textarea) '). Disableselection (). On (' MouseDown ', false);

But the problem came again, I found that after taking the above code, Input,select,textarea also began to become abnormal, it seems that the characteristics of shielding MouseDown applied to all elements. Now change the idea, combined with the scheme I have just proposed, to determine the event object to achieve selective masking, I will revise the code as follows:

Copy Code 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 textarea and input will not limit the MouseDown, we will draw this code into a function:

Copy Code code as follows:

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, the jquery version of the selective shielding to prevent the right mouse button

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

Copy Code code as follows:

$ (document). Bind ("ContextMenu", function (e) {
if (!jquery_istagname (E, [' INPUT ', ' TEXTAREA '])} {
E.preventdefault ();
return false;
}
return true;
});