Come sapere se il testo selezionato è all'interno di una specifica div

Question

Ho due div come illustrato di seguito:

<div id="div1"> 
<p>something</p> 
<div><table><tr><td>Div1</td></tr></table></div> 
</div> 
<div id="div2"> 
<p>something else</p> 
<div><table><tr><td>Div2</td></tr></table></div> 
</div> 
<button type="button">Check</button> 

Ora, voglio sapere quando è selezionato un testo e poi il pulsante premuto, se il testo selezionato è sotto "div1" o no. Come lo posso fare?

Modifica: E la soluzione deve funzionare in IE-7 e sopra.

Answer 1

La funzione elementContainsSelection() seguito ritorna un valore booleano che rappresenta se l'elemento specificato contiene l'intera selezione dell'utente e funziona in tutti i principali browser, tra cui Internet Explorer 6.

demo dal vivo : http://jsfiddle.net/eT8NQ/

Codice:

function isOrContains(node, container) { 
    while (node) { 
     if (node === container) { 
      return true; 
     } 
     node = node.parentNode; 
    } 
    return false; 
} 

function elementContainsSelection(el) { 
    var sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount > 0) { 
      for (var i = 0; i < sel.rangeCount; ++i) { 
       if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) { 
        return false; 
       } 
      } 
      return true; 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     return isOrContains(sel.createRange().parentElement(), el); 
    } 
    return false; 
} 

Answer 2

si potrebbe osservare un evento mouseUp su ogni div, e legare il seguente metodo ad esso:

var endpoint = null 
function getselected(event){ 
    endpoint = event.target; 
    var t = ''; 
    if(window.getSelection){ 
    t = window.getSelection(); 
    }else if(document.getSelection){ 
    t = document.getSelection(); 
    }else if(document.selection){ 
    t = document.selection.createRange().text; 
    } 
    return t; 
} 

questo metodo sarà quindi restituire il testo selezionato, vi dirà che il processo di selezione si è conclusa sul div che ha licenziato l'evento. se è necessario il punto di partenza, è necessario associare un evento mouse ai div, che memorizzerà l'id degli elementi in una variabile, in modo da poter determinare l'inizio e il punto finale del processo di selezione e scoprire quali div si trovano nel mezzo.

var startpoint = null; 
function beginSelection(event){ 
    startpoint = event.target; 
} 

se il metodo getSelected restituisce una stringa vuota, è necessario ripristinare start e endpoint.

Answer 3

qualcosa di simile:

function checkSelection() { 
    function checkNode(node) { 
     do { 
      if(node.id == "div1") 
       return true; 
     } while(node = node.parentNode); 

     return false; 
    } 

    if(window.getSelection) { 
     var selection = window.getSelection(); 
     for(var i = 0, l = selection.rangeCount; i < l; i++) { 
      var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer; 
      if(checkNode(start) || (start != end && checkNode(end))) 
       return true; 
     } 
    } 

    if(window.scelection && window.selection.createRange) { 
     var range = window.selection.createRange(); 
     if(range) 
      return checkNode(range.parentElement()); 
    } 

    return false; 
} 

Answer 4

@TimDown Questa restituisce sempre false se è dentro 'nodo' o no

if ((sel = document.selection) && sel.type != "Control") { 
    return isOrContains(sel.createRange().parentElement(), el); 
}