Zapobieganie zdarzeniu onClick podczas wybierania tekstu

Question

Mam problem, w którym muszę pokazać i ukryć elementy div po kliknięciu komórki tabeli. Jednak chcę również, aby ludzie mogli wybierać tekst i kopiować go w komórce bez ukrywania informacji.

Całkowicie otwarty na zmianę projektu, jeśli to konieczne. :)

Oto skrzypce który demonstruje WYDANIE

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

Oto kod HTML na skrzypcach:

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

oto javascript:

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

Wszelkie sugestie/Doradztwo jest bardzo doceniane!

/Patrik

Answer 1

Jedną z opcji jest sprawdzenie type obiektu Selection zwróconej przez window.getSelection:

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

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

Aktualizacja

Jeśli przeglądarka jesteś kierowania nie narazić type mienia na obiekcie Selection następnie można przetestować przed długości wybranej wartości Zamiast:

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

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

, która z kolei może zostać zredukowana do wartości bool check na toString:

if(!selection.toString()) {

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

Answer 2

Można sprawdzić, czy jest wybór dokonany w procedurze obsługi zdarzenia kliknięcia:

window.getSelection().toString(); 

Answer 3

Można użyć mouseup, mousedown i mousemove wydarzeń do osiągnięcia tego celu:

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

Można sprawdzić, czy „informacja” div jest przełączana:

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

Sprawdź to Fiddle