Javascript Girl
  1. Javascript Girl
  3. Quelle est la meilleure façon d'éviter la mise en surbrillance du texte en cliquant sur son contenant div dans javascript?
Intereting Posts
Vérifiez le mot de passe de l'utilisateur dans Meteor GetElementsByTagName () équivalent pour textNodes Comment vérifiez-vous qu'un numéro est NaN en JavaScript? Fonctionnement de l'objet JavaScript vs le tableau Est-il possible de réduire la complexité et la qualité des spaghettis de cette solution d'algorithme Javascript? D3.js Force Layout: Le nœud ajouté dynamiquement ne bouge pas avec le reste du graphique Message d'avertissement Firefox WebStorm: comment prétentir HTML entre guillemets dans un fichier JavaScript L'origine cible fournie ne correspond pas à l'origine de la fenêtre du destinataire: l'audio arrive mais pas la vidéo Comment installer eslint-config-airbnb correctement? `DEPENDENCY UNMET PEER` Ajout de plusieurs paramètres / arguments à une fonction de retour de jsonp Obtention de HTML compilé à partir de AngularJS Json date objet à php date Javascript DOM: Définir des propriétés d'élément DOM personnalisées Utilisation de jQuery lorsqu'il n'y a pas de connexion Internet

Quelle est la meilleure façon d'éviter la mise en surbrillance du texte en cliquant sur son contenant div dans javascript?

Je crée un menu dans HTML / CSS / JS et j'ai besoin d'un moyen d'empêcher que le texte du menu ne soit mis en surbrillance lorsque vous double-cliquez. J'ai besoin d'un moyen de passer les ID de plusieurs divs dans une fonction et de mettre en surbrillance hors tension.

Donc, lorsque l'utilisateur accidentellement (ou à l'intention) double-clique sur le menu, le menu affiche ses sous-éléments, mais son texte ne se met pas en surbrillance.

Il existe un certain nombre de scripts sur le Web, mais beaucoup semblent dépassés. Quelle est la meilleure façon?

Dans (Mozilla, Firefox, Camino, Safari, Google Chrome), vous pouvez utiliser ceci: 

div.noSelect { -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit browsers */ }

Pour IE il n'y a pas d'option CSS, mais vous pouvez capturer l'événement ondragstart et renvoyer faussement;

Mettre à jour

Le support du navigateur pour cette propriété s'est développé depuis 2008. 

 div.noSelect { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ }

https://css-tricks.com/almanac/properties/u/user-select/

Vous pouvez utiliser ce CSS pour simplement cacher la couleur de sélection (non prise en charge par IE): 

 #id::-moz-selection { background: transparent; } #id::selection { background: transparent; }

Vous pourriez:

  • Donnez-le ("il" étant votre texte) un événement onclick
  • Premier clic définit une variable à l'heure actuelle
  • Deuxième clic vérifie pour voir si cette variable est x fois de l'heure actuelle et actuelle (alors un double clic, par exemple, 500 ms, ne s'inscrit pas en double clic)
  • S'il s'agit d' un double clic, faites quelque chose à la page comme ajout de HTML caché, faisant document.focus (). Vous devrez expérimenter avec ceux-ci car certains pourraient provoquer un défilement indésirable.

J'espère que c'est ce que vous recherchez. 

 <script type="text/javascript"> function clearSelection() { var sel ; if(document.selection && document.selection.empty){ document.selection.empty() ; } else if(window.getSelection) { sel=window.getSelection(); if(sel && sel.removeAllRanges) sel.removeAllRanges() ; } } </script> <div ondblclick="clearSelection()">Some text goes here.</div>