title: jQuery: Capturing a click, but still allowing selection of text
body: <p>I'm attempting to create an inline textarea, where a user clicks a paragraph of text and a textarea replaces it.</p>
  
  <p>It's all going well, but when I attempt to select/highlight text in the area it displays the textarea.</p>
  
  <p>I notice that on Trello, it manages to avoid this.</p>
  
  <p>My HTML is as follows:</p>
  
  <pre><code>&lt;h2&gt;Your Notes&lt;/h2&gt;
  &lt;span id="notes_area" style="display: block;" data-entry-id="&lt;%= @entry.id %&gt;" title="Click to edit your notes."&gt;
      &lt;p&gt;&lt;%= @entry.notes.present? ? "#{@entry.notes}" : "You have not added any notes for this episode." %&gt;&lt;/p&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>And my CoffeeScript is as follows (with a lot cut-out):</p>
  
  <pre><code>$("#notes_area").bind "mouseup", -&gt;
      display_inline_note_form()
  
  display_inline_note_form = -&gt;
      # code goes here...
  </code></pre>
  
  <p>I'd imagine this is a solved problem, but I can't seem to find anything on the web.</p>
  
  <p>Thanks</p>