javascript - trigger onmouseup element correctly -

i have following html structure:

 <div id="grandparent">     <div id="parent">             <p>                 high light me mouse!! highlight me mouse!!highlight me mouse!!              </p>  </div> </div> 

and have js code:

$(document).mouseup(function (event) {         var target=event.target;         target=$(target);         var parent = target.parent();         console.log(parent.parent().attr("id"));             if (window.getselection) {             var selection = window.getselection();             selectedtext = selection.tostring();                 console.log(selectedtext);             }         }); 

so piece of code console logs selected text.

but have problem - when click not on <p> element , on document - , move mouse select text holding left button can't id of parent div because

var target=event.target; 

target becomes document element

change $(document).mouseup( $("#parent").mouseup( .

code:

$("#parent").mouseup(function (event) {    var target=event.target;    target=$(target);    var parent = target.parent();    console.log(parent.parent().attr("id"));    if (window.getselection) {      var selection = window.getselection();      selectedtext = selection.tostring();      console.log(selectedtext);    }  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="grandparent">      <div id="parent">              <p>                  high light me mouse!! highlight me mouse!!highlight me mouse!!                </p>    </div>  </div>