title: onclick blocks copy+paste on Mobile Safari?
body: <p><strong>Background:</strong> I have a dropdown menu that basically works the same as the one described on <a href="https://stackoverflow.com/questions/3239270/mobile-safari-event-issue">this other Mobile Safari Event Issue question</a>: click a menu item to display the dropdown, either click the menu item again or click anywhere else on the page to hide the menu. The jQuery that hides the dropdown is bound to the click event of a parent <code>&lt;div&gt;</code> spanning the entire window. This dropdown works A-OK in all browsers, including Mobile Safari, and I'm only describing it here for the sake of context.</p>
  
  <p><strong>The problem:</strong> this onclick event prevents users on Mobile Safari (tested on an iPod Touch 4.2.1 and iPad 4.3.5) from getting the normal touch-and-hold Copy | Paste popup anywhere on our site. D'oh! Based on my research, it seems that if an HTML element has a click handler defined, its contained content won't be copyable?</p>
  
  <p>I've set up a stripped-down demo here (<strong>Update:</strong> I'm using straight JavaScript in this demo to illustrate that it's not a jQuery issue, but this fails to work with jQuery's .click() as well): <a href="http://adamnorwood.com/ios-copypaste.html" rel="nofollow noreferrer">http://adamnorwood.com/ios-copypaste.html</a></p>
  
  <p>If you open that link in Mobile Safari, you shouldn't be able to copy the lorem ipsum text, but you will get a message via console.log() when you click on the text to prove that the click handler is firing.</p>
  
  <p>Here's the gist of it, in case that link goes down:</p>
  
  <pre><code>&lt;div id="content"&gt;Imagine a large block of text here...&lt;/div&gt;
  &lt;script&gt;
      document.getElementById('content').onclick = function() { 
          console.log('You just clicked me!'); 
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Things I've tried:</strong> </p>
  
  <ul>
  <li><p><code>-webkit-user-select: text</code> as <a href="https://stackoverflow.com/questions/3803770/unable-to-highlight-copy-text-in-iphone-safari-on-mobile-site">described here</a></p></li>
  <li><p>using onmouseup and other events instead of onclick (nope). </p></li>
  <li><p>moving the onclick to the <code>&lt;body&gt;</code> tag or to the window object</p></li>
  <li><p>Figure 6-4 in the <a href="http://developer.apple.com/library/iOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html" rel="nofollow noreferrer">iOS Handling Events documentation</a> is relevant, but didn't lead me to any great revelations about what to do...</p></li>
  </ul>
  
  <p>Any thoughts? Is this the way it's supposed to work, or am I missing something? Is there a way to make this text selectable, yet still fire the click handler? Or maybe I should go back to the drawing board for how to best hide the dropdown menu so that I avoid this issue entirely?</p>