我有两个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及更高版本中工作。

最佳答案

下面的elementContainsSelection()函数返回一个 bool(boolean) 值,该 bool(boolean) 值表示指定的元素是否包含用户的全部选择,并且可以在包括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;
}

10-06 12:42
查看更多