I remember that when I first came into contact with dynamic HTML and JavaScript, I came across script codes about right-click blocking of the mouse. At that time, many of these codes were used to prevent viewers from copying text or other content on the web page without permission. Later, Practical application proves that this approach is not in line with the user experience, and there are many ways to crack it. For example, I once wrote an article explaining how to remove the prohibition of copying on a web page.
It can be seen that it is unwise to restrict right-clicking and copying, but today I still want to talk about prohibiting webpage copying and right-clicking menus, because with the development of webpage APP technology, the difference between webpage applications and desktop applications The boundaries between them are becoming increasingly blurred. Some desktop programs are actually implemented by web pages and JavaScript, and some mobile applications can also be implemented by HTML5 JavaScript. In this case, it is necessary to restrict the right click, because As an APP, the right-click text selection and pop-up menu on the web page are unnecessary in most cases.
The following introduction may only cover a certain aspect of code, but I believe everyone will be able to draw inferences:-)
1. Rough version restricts copying or prohibits right-clicking
Let’s first talk about how to roughly restrict or prohibit viewers from copying text on a web page. To prevent viewers from copying text normally, we must think of disabling certain specific operations of users, such as right-clicking the mouse, selecting, copying, etc. etc., and these operations correspond to corresponding script events. As long as you add a method to these events and let it return false, you can "eat" the operation. Generally, the script code that prohibits copying is as follows:
2. Reasonably determine the HTML tag elements to be restricted
How to determine the element tag of the currently processed layer, that is to say, get the HTML Tag where the mouse is currently located. Here we take oncontextmenu as an example. In fact, the function passed in document.body.oncontextmenu has a parameter that we will omit. Yes, the complete writing method should be document.body.oncontextmenu=function(e){} where e is the Event object in JavaScript, which may be obtained through window.event in IE. Through this event object, we can get the HTML Tag where the mouse is when the event is triggered. We can judge whether we want to ignore processing element tags. Here I provide a function as follows:
The e here is the event object event, and the target is the element object referenced by the event object. Of course, both variables here are written in a way that is compatible with IE. For details, please refer to "How can I make event.srcElement work in" Firefox and what does it mean?》; The whitelists here are whitelist HTML element tag Tag names, such as ['INPUT', 'TEXTAREA'], which means that the input text box input and textarea will be added to the judgment. If the current event element is Return true, so that we can selectively block the right mouse button through the following code:
3. JQuery version’s selective blocking prohibits text selection
Similarly, other operations can also be selectively blocked. In an environment supported by JQuery, I found such an article on StackOverflow "How to disable text selection using jQuery?", although it explains that selection is prohibited. But you can learn from it. The specific code is as follows:
4. Further improvement: shielding mouse click operations
A problem I encountered when testing this code is that when clicking on elements other than input, select, and textarea, all pages will be selected. The original author gave a simple method by appending .on('mousedown to the usage code. ', false), thus blocking the mouse click. The usage code becomes as follows:
Copy the code