Prevent click event after tap

[akhile...@gmail.com]

I have been trying to figure out an easier way to prevent click events from an element that listens for tap. This is more of an issue on touch devices (iOS in particular). Here's an example: http://jsbin.com/totuhoveguke/2/edit

One solution is to attach another listener for touchend and then do event.preventDefault(). This causes weird side-effects which I want to avoid. Ideally my assumption was that when I am using touch-action = "none", I will be able to avoid all default browser events.

What's the best solution for such cases?

[Daniel Freedman]

Hi Akhilesh

We don't currently have a strategy to prevent clicks. I can take a look at what that would entail.

Touch-action is only supposed to control scrolling and zoom, so making the "none" value control clicks as well is a little outside the intended scope.

What you can do for now is place a document wide, capturing click listener that calls stopPropagation inside the "up" event handler, and then remove that click handler when a click happens, or after a timeout. This is the approach I am planning to evaluate.

I have been trying to figure out an easier way to prevent click events from an element that listens for tap. This is more of an issue on touch devices (iOS in particular). Here's an example: http://jsbin.com/totuhoveguke/2/edit

One solution is to attach another listener for touchend and then do event.preventDefault(). This causes weird side-effects which I want to avoid. Ideally my assumption was that when I am using touch-action = "none", I will be able to avoid all default browser events.

What's the best solution for such cases?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6f3bb3d1-52cb-4b89-9424-2cfdec3139f2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Steve Orvell]

Hey Akhilesh, 

Can you outline why you'd like to prevent clicks? Is it because some other user code may have installed a click listener you want to avoid or is it some native platform action (e.g. following a link) that you want to abort?

It would be great if you could just preventDefault in the tap event, unfortunately, tap is generated separately from click and is typically fired after it.

As Daniel mentioned, we're investigating providing a relatively easy way to do this in PolymerGestures.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAAUAVAgfxq6JQDX%2Bev%2BPtbuo48a2D780rZLP2VpQ_AJBujUxEQ%40mail.gmail.com.

[Akhilesh]

Apologies for delayed response. Was kind of heads down with the Dreamforce prep and polymer demos, which were just awesome!

Coming back to the preventDefault problem, I was able to create a simple sample that shows the issue. Try this link on Chrome on iOS: http://jsbin.com/mogusutono

Source: http://jsbin.com/mogusutono/edit?html

When you click the button, the view navigates to next page with the paper-input element. And on the next page, paper-input automatically receives a focus event and and keyboard pops up. Not ideal. I am able to work-around this by listening for touch-end event after the tap and then calling event.preventDefault. Would be better if tap event could handle this automatically for me. This also seems to only happen inside the UIWebView and not the iOS Safari.

Let me know if you guys need more details. Hope this helps!

[Daniel Freedman]

Yeah this seems like a pretty valid use case to fix in the gesture system. I'll investigate this for the next release.

[Justin Merz]

+1

I have experienced this behavior as well. Had to fall back to on-click.

[Akhilesh]

Thanks Daniel. Let me know once you have something that I can play with.

[Daniel Freedman]

Hey Akhilesh.

I've been playing with your example and I can't seem to trigger the focus bug on iOS 8. Are you only seeing this on iOS 7?

[Akhilesh]

Seems like that JSBin sample expired as it was on anonymous account. Just created a new one: http://jsbin.com/zidaqa/3

I am able to trigger the focus bug when I run it inside the chrome browser on iOS 8. This is essentially an issue on UIWebView but not on iOS8 Safari. Let me know if you can't reproduce it.

[Daniel Freedman]

Ah OK. I can only seem to reproduce this in Chrome for iOS, probably a UIWebView specific issue (at least on ios8). At least I have a case to test against now. Thanks!

[danel...@hotmail.com]

+1 for being able to preventDefault link navigation for on-tap like you can do with o-click

ie.

<a href='#' on-tap='{{addPhone}}'>Add number</a>

and prevent link navigation using preventDefault

this works fine when using on-click