ngMobile doesn't override ng-click with faster touch-based event when JQuery is loaded

[elirov]

http://plnkr.co/edit/fnJCUMn2fMZy9cIunfFj

If we leave the jquery include commented out, the ng-click responds quickly on my ipad.
If we add the jquery include back in, then the click seems to revert back to the slow click behavior.

[alexeygolev]

+1

[elirov]

Has anyone else been able to reproduce this using my plnkr on their iPad device?

[bennlich]

Yes.

[elirov]

Anyone have any idea what could be causing this? Looking quickly at the ngMobile code, I don't really see anything that depends on something that jQuery would override. Very strange.

[damrbaby]

Same issue here

[damrbaby]

Looks like there is a PR for this #2773

[bshepherdson]

PR #2773 was obsoleted recently, with #3198 taking over. That PR is on track to be merged soon.

[kevin-smets]

👍

[ChristianWeyer]

Seems that it is still not merged...

[nelsonpecora]

It looks like that PR was closed. Is there something that supercedes it?

[calvinl]

This is still happening with Angular 1.2.0-rc.2. Until it's fixed the FastClick library seems to do the trick. https://github.com/ftlabs/fastclick

[kellyrmilligan]

I agree, this is still broken in my opinion. seeing delay with 1.2.0rc.2 trying out rc 3 now.

[ChristianWeyer]

I tried with rc3 - and still see the delay. Hm.

[kellyrmilligan]

I am seeing it still as well with rc3. this basically makes ng-touch unusable with a delay. hopefully will make it into final release.

[perqa]

I have this problem without jQuery. Tried adding Fastclick, and there was a clear improvement.

[kellyrmilligan]

angular-gestures package is what I am running now. it ports all of the hammerjs library touch related events to angular. I have used hammerjs before on other projects and it's working great. it just sucks that the supposedly built in one isn't actually working. it says its based on jquery mobile tap event, which could explain it as i've only had bad experiences with that.

[perqa]

@kellyrmilligan, thanks for the tip. It looks great, except for one thing: it seems I would have to replace all my ng-clicks with hm-taps... It would be better with something that works both on PC and mobile with the same event handler directive. So that the same code can be used on different platforms...

[guybedo]

i'm working with rc3 and couldn't make it work with Jquery. Getting rid of JQuery solved the problem for me and now touch events are catched by the angular-touch ng-click directive.

[kellyrmilligan]

@perqa hammerjs will delegate to click when on a desktop browser, but you are right that all your ng-clicks would become hm-taps...

[perqa]

@kellyrmilligan, I think that's alright. As long as I don't need to maintain two different versions of the codebase, I'm happy. Thanks for sharing! :-)

[damrbaby]

@perqa @kellyrmilligan You should be able to stick with ng-click and fastclick, no need to replace everything with hm-tap if you are using fastclick unless you want to use hammer for more complex touch movements like drag and swipe. I haven't had any problems using fastclick and hammer together this way.

[perqa]

@damrbaby OK, that's also good to know. Thanks!

[nokturnal]

Yeap... same issue. 300ms'ish delay on ngclick when jquery is referenced while injecting ngtouch...

[kellyrmilligan]

Is there an angular specific implementation for fast-click? I agree if all you need is a solid tap event, that would be preferred. @damrbaby

[damrbaby]

@kellyrmilligan There does not need to be an angular-specific implementation of fastclick, all you need is fastclick.js and the following code outside the context of any angular code:

window.addEventListener('load', function () {
  FastClick.attach(document.body);
}, false);

The above will essentially turn all ng-clicks and any other click events into tap events, without the use of ngTouch (formerly ngMobile). However it does not conflict with ngTouch either if you have to include both, e.g. if you need ngTouch for swipe events.

[MaestroJurko]

I am having the same problem. Using jQuery - 1.9.1 and AngularJS 1.2 ngTouch library.

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

[evgenyneu]

ng-click example on documentation page of ngTouch has the same problem. When I tap the "increment" button on touch screen, it is has 300ms delay. Tested on iPad 2 with iOS 7.

http://docs.angularjs.org/api/ngTouch.directive:ngClick

[kevin-smets]

Well, I tried to come up with something a bit different than the current implementation of the ngTouch ngClick...

ngClick "extended" edition

http://cdpn.io/fwghk

• clicks fire right away, lovely!
• events propagate like they should
• the tap breaks when the user moves around too much, then scrolling or whatever can take over. This is done by checking how many touchmove events have been fired. Instead of having to do all kinds of calculations with touch coordinates (a solution I started with at first, based on the almighty google fast buttons article)
• the ghostclick isn't there, so not a problem even if the DOM changes (testable with the clickshift button)
• the ngTouch module is only needed to set the class '.ng-click-active'. It would be possible to leave it off completely and set / reset the classes in the "extended" ng-click.

The only problems I'm having with this implementation currently are the following:

• no double-tap to zoom when double-tapping on a clickable element. I don't want this anyway in my application, but it contradicts with default behaviour... Currently a "good" side effect, but not so for a proper solution.
• the input field can only get focus when holding it, but this problem also occurs on the ngTouch implementation of ngClick... Need to look into that one further. This is the biggest deal breaker (which I came across so far)
• untested when drag and drop comes into play.

ngTouch included, jQuery not included

Sooo, a proper fastclick (but not really?)

http://cdpn.io/GicbB

However, a problem I'm having here, is that when tapping the input field, the software keyboard shows up very briefly (mortal kombat "toasty" style). This was tested on iOS7. The stock browser on android or chrome on android doesn't give focus either.

It loses focus almost instantly. Holding down your finger on it, gives the field a proper focus. The stock browser on android and chrome on anrdoid selects some text but does not give focus at all... I guess an issue should be logged for this if there isn't one already.

ngTouch included, jQuery included

http://cdpn.io/CHrbd

Here everything works as expected, but with the delay... 👎

[loxy]

Are there any plans to eliminate this issue in future versions?

[RobbinHabermehl]

This issue is still present in AngularJS version 1.3.0-beta.15, combined with jQuery version 2.1.0.

[gersomvg]

This is really a deal breaker. I don't want to include any other libraries like FastClick, but I can't let go of jQuery.

[jasonhansel]

👍

[mullen3]

This issue should really be stated in ngTouch's documentation.

[caitp]

it's more like a bug to be fixed, really --- if we make it work with jqLite, is there some reason why it doesn't work with jQuery?

[mullen3]

I agree it should be fixed, but the ngClick documentation for ngTouch states:

A more powerful replacement for the default ngClick designed to be used on touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-release before sending the click event. This version handles them immediately, and then prevents the following click event from propagating.

The sole purpose of this directive is to avoid this delay. When it's not functioning with a library that is so widely used, it should be stated.

edit: I say this because it would have saved me a lot of headache

[chrisnicola]

This still doesn't appear to be fixed in 1.4. Due to conflicts with ngTouch and FastClick that have appeared (particularly with hover styles) I've simply removed ngTouch altogether and gone with Fastclick alone as the solution. This doesn't seem like it's going to get fixed.

[Narretz]

I have reason to assume that this was fixed by 06a9f0a