使用范围时，火狐浏览器/ 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);
            }
        }

- carlosdubusm

---

“test” 函数是由什么调用的？ - Pointy

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);
}

- Tim Down