Question

我正在搜索跨浏览器解决方案（Chrome，FF，Opera＆gt; 10，IE＆gt; = 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'));

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

1 个答案: