Detect user selection inside html element

Question

How can I determine if a custom selection (mouse selection) is inside / a child of a specific element?

Example:

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

pseudo code:

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

Answer 1

Using jQuery on () event handler

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

Edit: 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

Well, I managed to solve this in a "dirty" way. The code may use improvements, but it did the job for me, and I'm lazy to change it now. Basically, I look at a selection checker if at some point it reaches an element with the specified class.

  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