title: Get selection range values inside another selection in contentEditable
body: <p>I have a contentditable element.
  When user selects some text, I know about it using a keyup event. I'm interested in knowing when and if the selection has changed from last selection.</p>
  
  <p>The problem is (see <a href="http://jsfiddle.net/r80dfr72/1/" rel="nofollow noreferrer">Fiddle</a>):</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="div1" contenteditable="true"&gt;This is a sample text&lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code> $(function(){
    var selectedRange, selectedNode;
    $("#div1").on("keyup mouseup", function(e) {
      selectedRange = window.getSelection().getRangeAt(0);
      selectedNode = selectedRange.commonAncestorContainer;
      console.log("selected node: ", selectedNode);
      console.log("selected node value: ", selectedNode.nodeValue);
      console.log("selection chars range: START POS: ", selectedRange.startOffset);
      console.log("selection chars range: END POS: ", selectedRange.endOffset);
    });
  });
  </code></pre>
  
  <p>When a user selects some text, and then <strong>selects another text within the first selection's range</strong> (or just puts the caret inside the selected range) - the range object returns the wrong value, claiming that the selection hasn't been changed.</p>
  
  <p>Only after second selection/ mouse click will the range object return the correct value.</p>
  
  <p>It is very important for me to know the selection has changed on the first mouse click.</p>
  
  <p>I came across <a href="https://stackoverflow.com/questions/8442158/selection-change-event-in-contenteditable">this</a> answer, 3 years ago, hoping things have changed by now.</p>
  
  <p>Please note I'm supporting all major browsers (ie >=10) (e.g. no "selectstart" event in firefox).</p>
  
  <p>Here's how to reproduce this issue:</p>
  
  <ol>
  <li>Go to the fiddle attached, run the code and open web console.</li>
  <li>In the output window, select the word "sample" using the mouse, starting from letter "s" , releasing the mouse after letter "e".</li>
  <li>Notice the console saying the start offset ("POS") is 10 &amp; end offset is 16. </li>
  <li>click with the mouse inside the word "sample", between letters "m" to letter "p" (selecting nothing).</li>
  <li>Notice the web console, the range start position &amp; end position are told to stay the same.</li>
  <li>Repeat step 4.</li>
  <li>Notice correct values return by Range API now - position is 13.</li>
  </ol>
  
  <p>Thank you.</p>