title: Determine if dom element contains a highlighted text
body: <p>In my web app, I am trying to implement different behaviors for click and mouseup events for text elements. On a mouseup event, I check if there is a selected text and do something with it. On a click event I do something else, like navigating somewhere regarding clicked text. If there is a selected text, however, I won't execute the code on click event and this is the part I got stuck. Here is a modal of what I am doing now:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//the function that returns selected text as string
  function getSelectionText() {
    var text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
    } else if (document.selection &amp;&amp; document.selection.type != "Control") {
      text = document.selection.createRange().text;
    }
    return text;
  }
  
  function onMouseUp(event) {
    var selection = getSelectionText();
    if (selection != "") {
      alert("Selected text: " + selection);
    }
  
  }
  
  function onClick(event) {
    alert("You clicked the text.");
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;h2 onclick="onClick(); return false;" onmouseup="onMouseUp(); return false;"&gt;
      text to click or select
    &lt;/h2&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to do something like this in the onClick handler</p>
  
  <pre><code>function onClick(event)
  {
    if ( !hasSelectedParts(this) ) // want to implement hasSelectedParts() function
    {
        alert("You clicked the text.");
    }
  }
  </code></pre>
  
  <p>How can I implement that hasSelectedParts(domElement) function? That is,
  is there a simple way of detecting whether a dom element has some selected parts in it.</p>