title: Display popup above highlighted text in contenteditable div?
body: <p>I'm building a simple blogging-esque feature into one of my apps, and use the HTML5 contenteditable attribute because it's clean. However, what I need to do now is when the user highlights some text in the contenteditable div, a popup needs to appear above it. Right now I have a function that gets the selected text, which is binded to the DIV's mouseup(). However, when I click into the contenteditable div, the function is fired. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>function getSelected() {
              if (window.getSelection) {
                  return window.getSelection();
              }
              else if (document.getSelection) {
                  return document.getSelection();
              }
              else {
                  var selection = document.selection &amp;&amp; document.selection.createRange();
                  if (selection.text) {
                      return selection.text;
                  }
                  return false;
              }
              return false;
          };
  
  $("#content-create-partial").bind("mouseup", function(){
                  var text = getSelected();
                  if(text) {
                      console.log(text);
                  }
                  else{
                      console.log("Nothing selected?");
                  };
              });
  </code></pre>
  
  <p>How do I prevent the call from being fired when the user clicks into the contenteditable div, and only when they highlight some text?</p>