title: Selecting text behind another element with createEvent
body: <p>I have a scenario where I have some text, which should be user-selectable. The problem is, that there's an UI overlay on top of it, which prevents selecting text by default. The logical way to keep the overlay and still be able to select the text, would be to use synthetic events (use <code>document.createEvent</code>), but due to some reason, it doesn't work as expected.</p>
  <p>The events seem to be delegated correctly and fire their handlers, but no text is selected. I have an example <a href="http://jsfiddle.net/6mnXH/1/" rel="nofollow noreferrer">here</a>, which is a rough simplification of the problem.</p>
  <p>A few notes</p>
  <ol>
  <li>In Firefox if you start your selection outside of the overlay, you are still able to select the text you want, even if it's under the overlay</li>
  <li>When you have a normal selection in the uncovered area and you click on the overlay, it would be expected from the delegated <code>mousedown</code> event to remove the selection, but it doesn't happen</li>
  </ol>
  <p>Am I missing an event that should also be delegated (I have <code>mousedown</code>, <code>mousemove</code> and <code>mouseup</code>)? Or is it some kind of a security measure by browsers to disable such behavior (refer to the note nr 2)? Any other suggestions on how to get the desired result? I know I should work around the current overlay solution altogether, but I'm already curious about the problem itself.</p>