使用范围的奇怪的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);
}