Discussion approfondie sur JavaScript et JQuery bloquant le menu contextuel des pages Web et interdisant les compétences de sélection et de copie

Je me souviens que lorsque je suis entré en contact pour la première fois avec le HTML et le JavaScript dynamiques, je suis tombé sur des codes de script concernant le blocage du clic droit de la souris. À cette époque, beaucoup de ces codes étaient utilisés pour empêcher les spectateurs de copier du texte ou autre. contenu sur la page Web sans autorisation. Plus tard, des applications pratiques ont prouvé que cette approche n'est pas conforme à l'expérience utilisateur, et il existe de nombreuses façons de la déchiffrer. Par exemple, j'ai écrit un jour un article expliquant comment supprimer l'interdiction de. copier sur une page Web.

On peut voir qu'il n'est pas judicieux de restreindre le clic droit et la copie, mais aujourd'hui, je veux toujours parler de l'interdiction de la copie de pages Web et des menus contextuels, car avec le développement de la technologie APP de page Web, la différence entre les applications de page Web et applications de bureau Les frontières entre eux sont de plus en plus floues. Certains programmes de bureau sont en fait implémentés par des pages Web et JavaScript, et certaines applications mobiles peuvent également être implémentées par JavaScript HTML5. Dans ce cas, il est nécessaire de restreindre le clic droit, car. En tant qu'application, la sélection de texte par clic droit et le menu contextuel sur la page Web sont inutiles dans la plupart des cas.

L'introduction suivante ne contient peut-être qu'un certain aspect du code, mais je pense que tout le monde pourra en tirer des conclusions :-)

1. La version brute restreint la sélection de copie ou interdit le bouton droit de la souris

Parlons d'abord de la façon de restreindre ou d'interdire grossièrement aux téléspectateurs de copier du texte sur une page Web. Pour empêcher les téléspectateurs de copier du texte normalement, nous devons penser à désactiver certaines opérations spécifiques des utilisateurs, comme le clic droit de la souris, la sélection. , copie, etc., etc., et ces opérations correspondent aux événements de script correspondants. Tant que vous ajoutez une méthode à ces événements et que vous la laissez renvoyer false, vous pouvez "manger" l'opération. Généralement, le code de script qui interdit la copie est. comme suit :

Copier le code Le code est le suivant :

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

Pourquoi cela s'appelle-t-il ? Qu'en est-il de la version brute de la méthode ? Parce qu'après avoir utilisé cette méthode pour désactiver le bouton droit de la souris, vous constaterez qu'aucun contrôle sur la page Web ne peut être cliqué avec le bouton droit ou sélectionné. La page Web semble être devenue une image rigide. Vous penserez peut-être que cela n'a pas d'importance. , mais pour les contrôles de saisie de caractères tels que les zones de texte de saisie et de zone de texte, cela a beaucoup à voir avec cela. Ces endroits ne peuvent pas restreindre les opérations de clic droit et de sélection de copie de l'utilisateur.

2. Déterminez raisonnablement les éléments de balise HTML à restreindre

Comment déterminer la balise d'élément du calque en cours de traitement, c'est-à-dire obtenir la balise HTML où se trouve actuellement la souris. Ici, nous prenons comme exemple le menu contextuel. En fait, la fonction passée dans document.body. oncontextmenu a un paramètre que nous omettrons. Oui, la méthode d'écriture complète devrait être document.body.oncontextmenu=function(e){} où e est l'objet Event en JavaScript, qui peut être obtenu via window.event dans IE. Grâce à cet objet événement, nous pouvons obtenir la balise HTML là où se trouve la souris lorsque l'événement est déclenché. Nous pouvons juger si nous voulons ignorer les balises des éléments de traitement. Ici, je propose une fonction comme suit :

Copier le code Le code est le suivant :

Le e ici est l'événement de l'objet événement, et la cible est l'objet élément référencé par l'objet événement. Bien sûr, les deux variables ici sont écrites d'une manière compatible avec IE. Pour plus de détails, veuillez vous référer. à "Comment puis-je faire fonctionner event.srcElement dans" Firefox et qu'est-ce que cela signifie ?》; Les listes blanches ici sont des noms de balises d'éléments HTML de liste blanche, tels que ['INPUT', 'TEXTAREA'], ce qui signifie que le texte saisi box input et textarea seront ajoutés au jugement Si l'élément d'événement actuel est Return true, afin que nous puissions bloquer sélectivement le bouton droit de la souris via le code suivant :

. Copiez le code Le code est le suivant :

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

3. Le blocage sélectif de la version JQuery interdit la sélection de texte

De même, d'autres opérations peuvent également être bloquées de manière sélective. Dans un environnement pris en charge par JQuery, j'ai trouvé un tel article sur StackOverflow "Comment désactiver la sélection de texte à l'aide de jQuery ?", bien qu'il explique que la sélection est interdite. Mais vous pouvez apprendre. à partir de celui-ci. Le code spécifique est le suivant :

Copiez le code Le code est le suivant :

(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) {
                                                                                                                                                                                                                                       🎜> return permitDefault;
 }); 
};

 
$.fn.disableSelection = function() {

 this.ctrlCmd(['a', 'c ']);

 renvoie 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 ':'Aucun', 
' -MS-User-SELECT ':' Aucun ', 
' User-SELECT ':' Aucun '}) 
 .Bind (' sexctstart ', false);
};

})(jQuery);

 Prenez le code suivant à utiliser : 

Copier le code Le le code est le suivant :$(':not(input,select,textarea)').disableSelection();

De cette façon, la sélection peut être interdite sauf pour la saisie, la sélection et la zone de texte. L'astuce de ce code est qu'en plus de sélectionner le début, il ajoute également certaines fonctionnalités CSS prises en charge par les navigateurs spéciaux aux éléments associés. réaliser la plupart des navigations. En même temps, ce code bloque également la sélection des touches du clavier Ctrl A et Ctrl C. Je dois admirer la considération réfléchie de l'auteur. 

4. Amélioration supplémentaire : protection des opérations de clic de souris

Un problème que j'ai rencontré lors du test de ce code est que lorsque vous cliquez sur des éléments autres que input, select et textarea, toutes les pages seront sélectionnées. L'auteur original a donné une méthode simple en ajoutant .on('mousedown au code d'utilisation. ', faux), bloquant ainsi le clic de souris. Le code d'utilisation devient le suivant :

Copier le code Le code est comme. suit :

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

Mais le problème est revenu, j'ai découvert qu'après avoir pris ce qui précède. le code, l'entrée, la sélection et la zone de texte ont également commencé à devenir anormaux. Il semble que la fonctionnalité de blocage du déplacement de la souris ait été appliquée à tous les éléments. Maintenant, changez ma façon de penser et combinez la solution que je viens de proposer pour juger l'objet événementiel pour obtenir un blindage sélectif. J'ai corrigé le code comme suit :

Copiez le code<.> Le code est le suivant :

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

Ceci façon dont la zone de texte et la saisie ne sont pas Mousedown sera restreinte. Nous extrayons ce code dans une fonction :

Copiez le code Le code est tel que suit :

function jQuery_isTagName(e, listes blanches) {
 e = $.event.fix(e);
 var target = e.target || > if (listes blanches && $.inArray( target.tagName.toString().toUpperCase(), listes blanches) == -1) {
                return false ; not(input,select,textarea)').disableSelection(). on('mousedown', function(e) {
 if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
 e.preventDefault();
 return false;
 }
 renvoie vrai;
});




5. Le blocage sélectif de la version JQuery interdit le bouton droit de la souris



Pour le menu contextuel, on peut le gérer comme ceci : 

Copiez le code

Le code est le suivant :

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

return true;

});