检查指定的元素是否在内部选择中

Question

我正在搜索跨浏览器解决方案(Chrome,FF,Opera> 10,IE> = 8)以解决以下问题:

有一些HTML代码:

<div>
    <div id="one">
        <p id="red">red</p>
        <p id="green">green</p>
    </div>
    <div id="two">
        <p id="blue">blue</p>
        <p id="black">black</p>
    </div>
</div>

并且用户使用鼠标文本从'een'(在#green节点中)选择到'blu'(在#blue节点中).如何检查#blue是否在内部选择(无论是全部还是部分选择)并且#red和#black不在选择范围内.简单的API看起来像这样:

Selection.isElementSelected(document.getElementById('black'));

我试过使用DOMSelection和Ranges,但问题是我需要检查嵌套结构中的元素.在Chrome中,我可以使用Range.intersectsNode(),但这是唯一支持此方法的浏览器.

有什么建议？

Answer 1

经过一番研究后，我根据以下材料制定了解决方案： https ://developer.mozilla.org/en/DOM/range

http://msdn.microsoft.com/en-us/library/ms535872(v=vs.85).aspx

http://www.quirksmode.org/dom/range_intro.html

如果是 IE8，则必须选择整个节点，但这对我来说是可以接受的。

这是 jsfiddle 上的一些游乐场： http: //jsfiddle.net/58Uvd/ 这是代码：

(function () {

    function UserRange (win) {
        this.win = win || window;
        this.doc = this.win.document;

        this.userRange = this.createUserRange();
    }

    var NonIEPrototype = {

        constructor: UserRange,

        createUserRange: function () {
            var selection = this.win.getSelection();
            return selection.rangeCount
                ? selection.getRangeAt(0)
                : this.doc.createRange();
        },

        overlapsNode: function (node) {
            return this.intersectsNode(node);
        },


        intersectsNode: function (node) {
            // this method is implemented in Firefox with Gecko before 1.9
            // and other non-IE browsers
            if (this.userRange.intersectsNode) {
                return this.userRange.intersectsNode(node);
            }

            return this.intersectsRange(this.createRangeWithNode(node));
        },

        createRangeWithNode: function (node) {
            var rangeWithNode = node.ownerDocument.createRange();
            try {
                rangeWithNode.selectNode(node);
            }
            catch (ex) {
                rangeWithNode.selectNodeContents(node);
            }
            return rangeWithNode;
        },

        intersectsRange: function (range) {
            return this.userRange.compareBoundaryPoints(Range.END_TO_START, range) === -1 &&
                this.userRange.compareBoundaryPoints(Range.START_TO_END, range) === 1;
        }
    };

    var IEPrototype = {

        constructor: UserRange,

        createUserRange: function () {
            return this.doc.selection.createRange();
        },

        overlapsNode: function (node) {
            var rangeWithNode = this.createRangeWithNode(node);
            return this.containsRange(rangeWithNode);
        },

        createRangeWithNode: function (node) {
            var range = node.ownerDocument.selection.createRange();
            range.moveToElementText(node);
            return range;
        },

        containsRange: function (range) {
            return this.userRange.inRange(range);
        }
    };

    UserRange.prototype = window.getSelection ? NonIEPrototype : IEPrototype;
    window.UserRange = UserRange;

}());

及用法：

var userRange = new UserRange();
userRange.overlapsNode(document.getElementById('node-to-check'));