如何知道选定的文本是一个特定的div

Question

里面我有两个div，如下图所示：

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

现在，我想在选择一些文本要知道，然后按下按钮，如果选定的文本是否在“div1”之下。我怎样才能做到这一点？

编辑：该解决方案必须在IE-7及以上版本中工作。

Answer 1

下elementContainsSelection()函数返回表示指定元素是否包含了整个用户的选择，并在所有的主流浏览器，包括IE 6

现场演示的布尔：http://jsfiddle.net/eT8NQ/

代码：

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

，你可以观察每个格mouseUp事件，并结合下面的方法吧：

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

这种方法将回选定的文本，它会告诉你，在选择过程中的DIV结束发射了这个事件。如果您需要起点，您必须将一个mousedown事件绑定到div，这会将元素id存储在一个变量中，这样您可以确定选择过程的开始和终点，并找出哪些div位于两者之间。

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

如果getSelected方法会返回一个空字符串，你应该重置起点和终点。

Answer 3

类似：

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这始终返回false无论是内部的“节点”或不

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