Detect user selection within html element

Question

How can I detect if a user selection (highlighting with mouse) is within/a child of a certain 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;

This may throw some light http://stackoverflow.com/questions/6251937/how-to-get-selecteduser-highlighted-text-in-contenteditable-element-and-replac — Shyju, May 30 '12 at 03:41
Since you're using jQuery, [Caret](http://www.jquery-plugin.buss.hk/my-plugins/jquery-caret-plugin) is pretty cool. — mayhewr, May 30 '12 at 03:42

Eric Fortis · Answer 1 · 2012-05-30T04:17:41.603

2

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");
   });
});

edited May 30 '12 at 04:17

answered May 30 '12 at 03:41

Eric Fortis

16,372
6
41
62

how can I turn this into an if function? – Sam May 30 '12 at 03:47
Do you want to define some hovering area and then decide `if` is child(0) return true, `else if` child(1) return false? something like that? – Eric Fortis May 30 '12 at 03:52
This only works for hover, where the OP asked for selection (highlighting with mouse) – Daveo May 30 '12 at 04:09
Ohh I see, he wants to use a selection highlight (click-drag) – Eric Fortis May 30 '12 at 04:20

score 0 · Answer 2 · answered May 09 '14 at 18:54

Ok I managed to solve this in a "dirty" way. The code could use improvement but it did the job for me and I am lazy to change it now. Basically I loop through the object of the selection checking 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

Detect user selection within html element

2 Answers2

Linked