Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preventDefault only works in a tap handler if the source was a click, not a touch #3567

Closed
lesliana opened this issue Apr 7, 2016 · 5 comments
Assignees
Labels

Comments

@lesliana
Copy link

lesliana commented Apr 7, 2016

If you call event.preventDefault() in a tap handler, it will only prevent default if the source event was a click, but not if the source was a touch.

This means that if I have a tap handler on a site with touch input and I want to prevent default, I need to add a touchend handler and call event.preventDefault there. This leads to having two handlers for the same event (a tap and a touchend handler) in many places across the site, which isn't ideal.

In gestures.html (https://github.com/Polymer/polymer/blob/master/src/standard/gestures.html#L395), preventDefault is called for click events only, because for a touch the sourceEvent is Touch (changedTouches[0]) rather than something from the browser's event chain, like touchend.

@cdata cdata added the bug label Apr 7, 2016
@cdata
Copy link
Contributor

cdata commented Apr 7, 2016

Here is a reduced test case: http://jsbin.com/hisozi/3

It appears as though an unchecked ghost click fires on the <a>. The expectation is that this event would be default prevented. However, it appears that it is not being prevented.

@cdata cdata closed this as completed Apr 7, 2016
@cdata cdata reopened this Apr 7, 2016
@hypnoce
Copy link

hypnoce commented Apr 10, 2016

Hi,

Agree with lesliana.
Seems like touch events are fired giving an instance of a Touch object as sourceEvent.
The Touch object has no preventDefault method. Therefore, in the fire method, even if preventDefault is called on a tap event, the original event won't be default prevented.

I have the same issue when I want to prevent default a track event.

Thanks

@eeid26
Copy link

eeid26 commented Apr 10, 2016

as a workaround

Try to add a touchstart handler to your listener object that has tap or track handlers. You can call preventDefault on the event you receive. This event is the same event that started the tap or the tracking.

    listeners : {
      'touchstart': '_preventDefault',
      'tap': '_tapHandler'
     },

    _preventDefault: function(event) {
      event.preventDefault();
    }

dfreedm added a commit that referenced this issue Apr 11, 2016
Expose setting to enable mouse handlers on touch-only devices

Fixes #3567
@hypnoce
Copy link

hypnoce commented Apr 12, 2016

@azakus In the polymer documentation, it says

sourceEvent—the original DOM event that caused the [...] action

But this is not the case for touch events. Do you think the doc should be changed ? Or maybe the sourceEvent should be the actual event and use another object to get event positions.

I modified the commit so that you get the idea.
hypnoce@7d3a7e0

@robinglen
Copy link

@azakus is there any movement on this?

dfreedm added a commit that referenced this issue Jun 7, 2016
* Support preventDefault() on touch

Expose setting to enable mouse handlers on touch-only devices

Fixes #3567

* remove experimental setting to disable touch-only detection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

6 participants