检查指定的元素是否在选择范围内

Check if specified element is inside selection

本文关键字：选择 范围内 是否 元素 检查      更新时间：2023-09-26

我正在为以下问题寻找跨浏览器解决方案（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"（在#绿色节点中）到"blu"（在#blue节点中）进行选择。我如何检查#blue是否在选择范围内（无论是全部还是部分选择）以及#red和#black是否不在选择范围中。简单的API看起来是这样的：

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

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

有什么建议吗？

经过一些研究，我根据以下材料制定了解决方案：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'));
相关文章：