Prevenire evento onClick quando si seleziona il testo

Question

Ho riscontrato questo problema in cui è necessario mostrare e nascondere i div quando si fa clic su una cella di tabella. Tuttavia, voglio anche che le persone siano in grado di selezionare il testo e copiarlo all'interno della cella senza nascondere le informazioni.

Totalmente aperto per modificare il progetto se necessario. :)

Ecco un violino che dimostra la questione

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

Ecco il codice HTML nella violino:

<table border=1> 
    <tr> 
     <td> 
      Information 
     </td> 
     <td onClick="toggleInfo()"> 
      <div id="information" style="display:none"> 
       More information that I want to select without hiding 
      </div> 
      <div id="clicktoshow"> 
       Click to show info 
      </div> 

     </td> 
    </tr> 
</table> 

Ecco il javascript:

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

Ogni suggerimento/consiglio è molto apprezzato!

/Patrik

Answer 1

Una possibilità è quella di verificare la type dell'oggetto Selection restituito da window.getSelection:

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

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

Aggiornamento

Se il browser ci si rivolge non espone una proprietà type sull'oggetto Selection allora si può confrontare con la lunghezza del valore selezionato invece:

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

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

che può a sua volta essere ridotto a un controllo booleano su toString:

if(!selection.toString()) {

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

Answer 2

Si potrebbe verificare se v'è una selezione fatta nel gestore di eventi click:

window.getSelection().toString(); 

Answer 3

È possibile utilizzare mouseup, mousedown e mousemove eventi per raggiungere questo obiettivo:

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

SOURCE

Answer 4

È possibile controllare se il div 'informazioni' viene alternata:

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

controllare questa soluzione facile Fiddle