title: How can you prevent clearing the selection before onclick event processing?
body: <p>I want to attach an event handler to a <code>&lt;span&gt;</code> node that processes the current selection, but before the click event fires, it appears as though the selection is cleared by the browser (Chrome 16.0.912.63).</p>
  <p>I can work around this in a slightly messy way by attaching a handler to <code>onmousedown</code>, but I'd rather not have to do it that way.</p>
  <p>Here's a brief HTML example that illustrates the problem (requires jQuery):</p>
  <pre><code>&lt;span class=&quot;paste&quot;&gt;PASTE&lt;/span&gt;
  &lt;textarea id=&quot;selected&quot;&gt;&lt;/textarea&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
    $('.paste').click(function(e) {
        var txt = window.getSelection(); // works only in Chrome, Safari, FF
        $('#selected').val(txt);
        e.stopPropagation();
    });
  &lt;/script&gt;
  </code></pre>
  <p>The desired behavior is that I'm able to select some text using the mouse, then click on the word &quot;PASTE&quot; to have the contents of the selected area inserted into the textarea.  It appears as though the selection is cleared before the click handler fires.  This code works just fine if I use:</p>
  <pre><code>&lt;a class=&quot;paste&quot; href=&quot;#&quot;&gt;PASTE&lt;/a&gt;
  </code></pre>
  <p>instead of a span element, or if I bind <code>onmousedown</code>, but I'm not in control over the elements, so I can't just use an <code>&lt;a&gt;</code> instead of a <code>&lt;span&gt;</code>.</p>