Làm thế nào để biết nếu văn bản đã chọn là bên trong một div cụ

Question

Tôi có hai divs như hình dưới đây:

<div id="div1"> 
<p>something</p> 
<div><table><tr><td>Div1</td></tr></table></div> 
</div> 
<div id="div2"> 
<p>something else</p> 
<div><table><tr><td>Div2</td></tr></table></div> 
</div> 
<button type="button">Check</button> 

Bây giờ, tôi muốn biết khi một số văn bản được chọn và sau đó là nút nhấn, nếu văn bản đã chọn nằm trong "div1" hay không. Làm thế nào tôi có thể làm điều đó?

Chỉnh sửa: Và giải pháp phải hoạt động trong IE-7 trở lên.

Answer 1

Chức năng elementContainsSelection() dưới đây trả về một boolean đại diện cho dù các yếu tố quy định chứa toàn bộ lựa chọn của người sử dụng và làm việc tại tất cả các trình duyệt chính, bao gồm IE 6.

sống bản demo : http://jsfiddle.net/eT8NQ/

Code:

function isOrContains(node, container) { 
    while (node) { 
     if (node === container) { 
      return true; 
     } 
     node = node.parentNode; 
    } 
    return false; 
} 

function elementContainsSelection(el) { 
    var sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount > 0) { 
      for (var i = 0; i < sel.rangeCount; ++i) { 
       if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) { 
        return false; 
       } 
      } 
      return true; 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     return isOrContains(sel.createRange().parentElement(), el); 
    } 
    return false; 
} 

Answer 2

bạn có thể quan sát một sự kiện mouseup trên mỗi div, và ràng buộc các phương pháp sau đây với nó:

var endpoint = null 
function getselected(event){ 
    endpoint = event.target; 
    var t = ''; 
    if(window.getSelection){ 
    t = window.getSelection(); 
    }else if(document.getSelection){ 
    t = document.getSelection(); 
    }else if(document.selection){ 
    t = document.selection.createRange().text; 
    } 
    return t; 
} 

phương pháp này sau đó sẽ trở lại với văn bản đã chọn, nó sẽ cho bạn biết rằng quá trình lựa chọn kết thúc vào div đã sa thải sự kiện. nếu bạn cần điểm bắt đầu, bạn phải ràng buộc một sự kiện được biến thành các div, sẽ lưu trữ các phần tử id trong một biến, vì vậy bạn có thể xác định điểm bắt đầu và điểm cuối của quá trình lựa chọn và tìm ra các div nằm ở giữa.

var startpoint = null; 
function beginSelection(event){ 
    startpoint = event.target; 
} 

nếu phương thức getSelected trả về một chuỗi rỗng, bạn nên đặt lại điểm bắt đầu và điểm cuối.

Answer 3

cái gì đó như:

function checkSelection() { 
    function checkNode(node) { 
     do { 
      if(node.id == "div1") 
       return true; 
     } while(node = node.parentNode); 

     return false; 
    } 

    if(window.getSelection) { 
     var selection = window.getSelection(); 
     for(var i = 0, l = selection.rangeCount; i < l; i++) { 
      var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer; 
      if(checkNode(start) || (start != end && checkNode(end))) 
       return true; 
     } 
    } 

    if(window.scelection && window.selection.createRange) { 
     var range = window.selection.createRange(); 
     if(range) 
      return checkNode(range.parentElement()); 
    } 

    return false; 
} 

Answer 4

@TimDown này luôn trả về false cho dù đó là bên trong 'nút' hay không

if ((sel = document.selection) && sel.type != "Control") { 
    return isOrContains(sel.createRange().parentElement(), el); 
}