OnClick-Ereignis bei der Textauswahl verhindern

Question

Ich habe dieses Problem, wo ich divs ein- und ausblenden muss, wenn ich auf eine Tabellenzelle klicke. Ich möchte aber auch, dass die Benutzer Text auswählen und in der Zelle kopieren können, ohne die Informationen zu verbergen.

Völlig offen, um das Design zu ändern, wenn nötig. :)

Hier eine Geige ist, die die Ausgabe

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

Hier ist der HTML-Code in der Geige zeigt:

<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> 

Hier ist die javascript:

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

Jeder Vorschlag/beraten wird sehr geschätzt!

/Patrik

Answer 1

Eine Option ist die type des Selection Objekt durch window.getSelection zurückgegeben zu überprüfen:

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

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

aktualisieren

Wenn der Browser Sie Targeting aussetzen keine type Eigenschaft auf dem Selection Objekt dann können Sie testen gegen die Länge des gewählten Wertes statt:

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

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

, die ihrerseits wiederum auf einen Boolcheck reduziert werden können: :

if(!selection.toString()) {

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

Answer 2

Sie könnten überprüfen, ob es eine Auswahl in dem Click-Ereignishandler gemacht ist:

window.getSelection().toString(); 

Answer 3

können Sie verwenden mouseup, mousedown und mousemove Ereignisse dieses Ziel zu erreichen:

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

können Sie überprüfen, ob die ‚Informationen‘ div umgeschaltet wird:

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

prüfen diese Fiddle