Empêcher l’événement onClick lors de la sélection de texte

J’ai ce problème où je dois montrer et cacher des divs en cliquant sur une cellule de tableau. Cependant, je souhaite également que les utilisateurs puissent sélectionner du texte et le copier dans la cellule sans masquer les informations.

Totalement ouvert pour changer le design si nécessaire. 🙂

Voici un violon qui démontre le problème

http://jsfiddle.net/k61u66ek/1/

Voici le code HTML dans le violon:

   Information    More information that I want to select without hiding 
  Click to show info

Voici le javascript:

 function toggleInfo() { $("#clicktoshow").toggle(); $("#information").toggle(); }

Toute suggestion / conseil est très apprécié!

/ Pasortingk

Une option consiste à vérifier le type de l’object Selection renvoyé par window.getSelection :

 function toggleInfo() { var selection = window.getSelection(); if(selection.type != "Range") { $("#clicktoshow").toggle(); $("#information").toggle(); } }

http://jsfiddle.net/k61u66ek/4/

Mettre à jour

Si le navigateur que vous ciblez n’expose pas de propriété de type sur l’object Selection vous pouvez également tester la longueur de la valeur sélectionnée:

 function toggleInfo() { var selection = window.getSelection(); if(selection.toSsortingng().length === 0) { $("#clicktoshow").toggle(); $("#information").toggle(); } }

http://jsfiddle.net/k61u66ek/9/

qui peut à son tour être réduit à une vérification toSsortingng sur toSsortingng :

if(!selection.toSsortingng()) {

http://jsfiddle.net/k61u66ek/10/

Vous pouvez vérifier si une sélection est faite dans le gestionnaire d’événements click:

 window.getSelection().toSsortingng();

Vous pouvez utiliser les mouseup , mousedown et mousemove pour y parvenir:

DEMO

 var isDragging = false; $("#clickshow") .mousedown(function() { isDragging = false; }) .mousemove(function() { isDragging = true; }) .mouseup(function() { var wasDragging = isDragging; isDragging = false; if (!wasDragging) { $("#information").toggle(); $("#clicktoshow").toggle(); } });

LA SOURCE

Vous pouvez vérifier si la div ‘information’ est basculée:

 function toggleInfo() { if(document.getElementById('information').style.display == 'none'){ $("#clicktoshow").toggle(); $("#information").toggle(); } else { // do nothing } }

Vérifiez ce violon