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