html 요소 내에서 사용자 선택 감지

Question

사용자 선택 (마우스로 강조 표시)이 특정 요소 내/하위 요소에 있는지 감지 할 수 있습니까?

예 :

<div id="parent"> 
    sdfsdf 
    <div id="container"> 
     some 
     <span>content</span> 
    </div> 
    sdfsd 
</div> 

의사 코드 : jQuery를 on() event handler를 사용

if window.getSelection().getRangeAt(0) is a child of #container 
return true; 
else 
return false; 

Answer 1

$(function() { 
    $("#container > * ").on("click", 
     function(event){ 
      return true; 
     }); 
    });​ 

편집 :http://jsfiddle.net/9DMaG/1/

<div id="parent">outside 
    <div id="container"> 
     outside 
     <span>first_span_clickMe</span> 
     <span>second_span_clickMe</span> 
    </div> 
outside</div> 


$(function() { 
    $("#container > span").on("click", function(){ 
     $('body').append("<br/>child clicked"); 
    }); 
});​ 

Answer 2

좋아요. 나는 이것을 "더러운"방식으로 해결할 수있었습니다. 이 코드는 개선을 사용할 수 있지만 그 일은 나에게 도움이되었고 지금은 변경하기가 게으르다. 기본적으로 어떤 시점에서 지정된 클래스가있는 요소에 도달하면 선택 검사의 객체를 반복합니다.

var inArticle = false; 
    // The class you want to check: 
    var parentClass = "g-body"; 

    function checkParent(e){ 
     if(e.parentElement && e.parentElement != $('body')){ 
      if ($(e).hasClass(parentClass)) { 
       inArticle = true; 
       return true; 
      }else{ 
       checkParent(e.parentElement); 
      } 
     }else{ 
      return false; 
     } 
    } 


    $(document).on('mouseup', function(){ 
     // Check if there is a selection 
     if(window.getSelection().type != "None"){ 
      // Check if the selection is collapsed 
      if (!window.getSelection().getRangeAt(0).collapsed) { 
       inArticle = false; 

       // Check if selection has parent 
       if (window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement) { 
        // Pass the parent for checking 
        checkParent(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement); 
       }; 


       if (inArticle === true) { 
        // If in element do something 
        alert("You have selected something in the target element"); 
       } 
      }; 
     } 
    }); 

JSFiddle