使用范围的奇怪的 firefox/javascript 行为

Question

嘿，所以我正在使用范围，我试图限制用户可以在页面上进行的选择。我的意思是用户可以选择他想要的任何内容，但选择不能超出我将设置的界限。

首先，我用定义的范围定义“边界”。然后，我将当前用户选择与定义的范围进行比较，如果当前选择开始低于边界或当前选择结束高于边界，我会相应调整，以便用户选择永远不会超出定义的边界范围/选择。

下面的函数仅适用于如果我在进程开始之前输出警报，如果我删除警报，则 Firefox 的行为会很奇怪（例如选择页面的另一部分等）。

问题是：为什么以下代码适用于警报并且为什么在没有警报的情况下它不能按预期工作？

谢谢！

var range = document.createRange(); // this is the boundaries range
range.selectNodeContents(document.getElementById("container"));

function test(){
            alert("let's go"); // if I remove this alert, the code doesn't work as expected, WHY?!
            if(window.getSelection().rangeCount == 0){
                return;
            }
            var curRange = window.getSelection().getRangeAt(0);
            if(curRange.compareBoundaryPoints(Range.START_TO_START, range) < 0){
                curRange.setStart(range.startContainer,range.startOffset);
            }

           if(curRange.compareBoundaryPoints(Range.END_TO_END, range) > 0){
               curRange.setEnd(range.endContainer,range.endOffset);
            }
        }

Answer 1

首先，要在其他浏览器中工作（IE <= 8 除外，它的处理方式完全不同），您需要重新选择范围。其次，要使其在 Firefox 中工作，您需要对原始选定范围进行克隆：

function test(){
    var sel = window.getSelection();
    if (sel.rangeCount == 0) {
        return;
    }
    var curRange = sel.getRangeAt(0).cloneRange();
    if (curRange.compareBoundaryPoints(Range.START_TO_START, range) < 0) {
        curRange.setStart(range.startContainer,range.startOffset);
    }
    if (curRange.compareBoundaryPoints(Range.END_TO_END, range) > 0) {
        curRange.setEnd(range.endContainer,range.endOffset);
    }
    sel.removeAllRanges();
    sel.addRange(curRange);
}