Listen to `preventDefault` on the "tap" event, allowing it to prevent the "click" event. #546

Closed
wants to merge 3 commits into
from

Conversation

Projects
None yet
4 participants
Contributor

bnickel commented Jul 16, 2012

Fixes issue #511, where an element being moved on a tap event causes a different element to receive the click event. This gives developers an option to prevent the default action.

Demo here: http://softwaresupportedknitting.com/zepto-tap-prevent-default/

bnickel added some commits Jun 12, 2012

@bnickel bnickel Enabled calling of custom `$.isPlainObject` in `zepto.init`, replaced…
… `__proto__` with `Object.getPrototypeOf` in `isPlainObject`. Added comment to `zepto.Z` that replacements must be done in custom builds due to default dependencies calling `$(document).ready`.
506012c
@bnickel bnickel Added support for blocking `click` event with `preventDefault` on the…
… `tap` event, fixing issue 511. Because `click` is emitted after touchend, if the element moves as a result of `tap`, a different element may receive `click` event. `preventDefault` will fix this by blocking the default actions (`click`, etc)
7ab7b0f
@bnickel bnickel Revert "Enabled calling of custom `$.isPlainObject` in `zepto.init`, …
…replaced `__proto__` with `Object.getPrototypeOf` in `isPlainObject`. Added comment to `zepto.Z` that replacements must be done in custom builds due to default dependencies calling `$(document).ready`."

This reverts commit 506012c.
88f16f7
Contributor

bnickel commented Jul 16, 2012

Ignore the extra commits. I branched off another branch with changes.

Have you tested this on Android? It doesn't seem to work on ICS.

Contributor

bnickel commented Jul 31, 2012

I had only tested it in iOS5. I've confirmed that it doesn't work in an ICS emulator. It's strange that this approach wouldn't work in Browser. Does it work in Chrome?

Contributor

elgerlambert commented Sep 20, 2012

I can also confirm that this works on iOS 5, but not on Android (2.3.6).
+1 for trying to fix this though! Very unwanted behaviour and had me a bit confused.

@bnickel I'm trying to think of a scenario where you would want to fire both a tap and a click event.. IFF you trigger a tap event don't you always want to prevent the click event from occuring? So you don't actually need the if (tapEvent.defaultPrevented) check - because I think alot of users will be surprised/not expect they have to actively prevent click events from occuring if they specify a tap event.

A mouseclick would simply not trigger the tap event so you can still bind a tap and click event onto the same element and have it work on both touchscreens and PC - I think.. or am I wrong?

madrobby was assigned Nov 24, 2013

Owner

madrobby commented Nov 24, 2013

This doesn't actually work. Fist off, click events are not cancelled when preventDefault() is called on touchend events. There's also cross-browser issues concerning PointerEvents on IE.

You can check out https://developers.google.com/mobile/articles/fast_buttons?csw=1#ghost for a more encompassing solution that I think is beyond the scope of touch.js. The idea here is to manual prevent mouse clicks in the vicinity of the area the touch happens for a specific interval after the touch ends. This is the only solution the works on a broad basis.

As a workaround, you could store when the tap happened on the element in question and in your click event handlers check for the timestamp and only continue on when the click didn't happen with a second or so of the tap.

One thing I do in my code is to not register click handlers at all when touch events are available—this makes dealing with situations like this easier.

madrobby closed this Nov 24, 2013

"One thing I do in my code is to not register click handlers at all when touch events are available—this makes dealing with situations like this easier."

Keep in mind that this breaks the trackpad interaction on devices like the MS Surface or Chromebook Pixel.

Owner

madrobby commented Nov 25, 2013

These chimera are neither good touch devices not good non-touch devices. :(

Anyway, works great for phones.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment