search

madrobby / zepto

Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API
http://zeptojs.com
Other
15k stars 3.91k forks source link

'click' event handler breaks iPhone text selection #479

Closed irace closed 11 years ago

irace commented 12 years ago

Using the 'click' event handler in the following fashion seems to break text selection on the iPhone.

$('#container').on('click', '.some-class', function() {
    // Anything
});

This prevents the user from selecting text anywhere in the web view, not just the target element matched by the selector.

The reason I am listening for 'click' as opposed to 'tap' events is that HTML5 audio players can apparently only be played/paused from the former.

Please let me know if I'm simply doing something stupid :)

irace commented 12 years ago

I should note that 'mouseup' also appears to have the same behavior (prevents the user from selecting text).

mislav commented 12 years ago

Interesting (if this is true). You should know that observing a "click" event on a natively non-clickable element (in your case, "#container") on iOS changes the nature of that element slightly. You should definitely try to use tap events when possible. As for HTML5 audio player restrictions, I don't know. You should try it yourself.

irace commented 12 years ago

I have tried it myself. Observing 'click' is the only way I am able to use JavaScript to pause/play the audio element. I would love to somehow be able to observe 'tap' and still have this ability, as to not screw with the native text selection capabilities.

mislav commented 12 years ago

Observing 'click' is the only way I am able to use JavaScript to pause/play the audio element.

That is bizarre. Are you sure it's not something in your code? Have you tried using native touch events (not ones provided by Zepto) such as "touchend"?

irace commented 12 years ago

Using 'touchend' does fix the issue: it satisfies Mobile Safari's user-initiation policy (http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW4) but does not interfere with standard iOS text selection.

Thanks for the suggestion!

mislav commented 12 years ago

So, is the conclusion that one can't use Zepto-provided "tap" event to interact with Audio elements?

irace commented 12 years ago

Yes, I believe so.

From Apple's documentation:

"This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">

This does nothing on iOS: <body onLoad="document.myMovie.play()">"

Apparently Zepto's 'tap' event does not qualify as user initiated in the same way that 'click' events do.

madrobby commented 11 years ago

FWIW, you can use "touchend" on iOS for this. Non-native or events generated in JavaScript can't do certain things like start playing audio or focusing a text field.

Closing stale ticket in favor of #805.