Menu
Background: I have a dropdown menu that basically works the same as the one described on this other Mobile Safari Event Issue question: 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 <div> 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.
The problem: 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?
I've set up a stripped-down demo here (Update: 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): http://adamnorwood.com/ios-copypaste.html
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.
Here's the gist of it, in case that link goes down:
<div id="content">Imagine a large block of text here...</div>
<script>
document.getElementById('content').onclick = function() {
console.log('You just clicked me!');
}
</script>
Things I've tried:
-webkit-user-select: text as described here
using onmouseup and other events instead of onclick (nope).
moving the onclick to the <body> tag or to the window object
Figure 6-4 in the iOS Handling Events documentation is relevant, but didn't lead me to any great revelations about what to do...
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?
354
Aha, after putting this problem on the far back burner for a couple of weeks, a fix came to mind suddenly (at least this seems to work on first glance). Instead of using .onclick() (or jQuery's .click()) for this, Mobile Safari can make better use of the touchstart event handler:
<div id="content">Imagine a large block of text here...</div>
<script>
document.addEventListener('touchstart', function () {
console.log('Yay, you clicked the text, and you can still copy-and-paste!');
}, false);
</script>
With this code in place, the dropdown menu in my example case is able to be hidden by clicking anywhere else on the document, AND I can still get to the standard iOS Copy | Paste bubble when press-and-holding on the text (the desired normal behavior). Mobile Safari gets the 'touchstart' listener, other browsers get 'onclick'. I don't like having to put this kind of browser sniffing in place, but it solves the issue. Unless there's a reason that listening for this as a touchstart event is a problem, I'll flag this as answered.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With