Kiểm tra xem yếu tố quy định là bên trong lựa chọn

Question

tôi đang tìm kiếm giải pháp trình duyệt chéo (Chrome, FF, Opera> 10, IE> = 8) cho các vấn đề sau đây:

Có một số mã 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> 

và người dùng chọn văn bản chuột từ 'een' (trong nút #green) đến 'blu' (trong nút #blue). Làm thế nào tôi có thể kiểm tra nếu #blue là lựa chọn bên trong (nó không quan trọng nếu toàn bộ hoặc một phần được chọn) và #red và #black không được chọn. Simple API sẽ trông như thế này:

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

Tôi đã cố gắng sử dụng DOMSelection và Ranges nhưng vấn đề là tôi cần phải kiểm tra các yếu tố trong cấu trúc lồng nhau. Trong Chrome, tôi có thể sử dụng Range.intersectsNode(), nhưng đây là trình duyệt duy nhất có hỗ trợ phương pháp này.

Mọi đề xuất?

Answer 1

Sau khi một số nghiên cứu tôi đã thực hiện giải pháp dựa trên các vật liệu sau đây: 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

Trong trường hợp toàn bộ nút IE8 phải được lựa chọn nhưng điều này là chấp nhận được đối với tôi.

Dưới đây là một số sân chơi trên jsfiddle: http://jsfiddle.net/58Uvd/ Và đây là mã:

(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; 

}()); 

Và sử dụng:

var userRange = new UserRange(); 
userRange.overlapsNode(document.getElementById('node-to-check'));