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

elirov commented 11 years ago

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 commented 11 years ago

+1

elirov commented 11 years ago

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

bennlich commented 11 years ago

Yes.

elirov commented 11 years ago

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 commented 11 years ago

Same issue here

damrbaby commented 11 years ago

Looks like there is a PR for this https://github.com/angular/angular.js/pull/2773

bshepherdson commented 11 years ago

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

kevin-smets commented 11 years ago

:+1:

ChristianWeyer commented 11 years ago

Seems that it is still not merged...

nelsonpecora commented 11 years ago

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

calvinl commented 11 years ago

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 commented 11 years ago

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

ChristianWeyer commented 11 years ago

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

kellyrmilligan commented 11 years ago

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 commented 11 years ago

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

kellyrmilligan commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

@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 commented 11 years ago

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

nokturnal commented 11 years ago

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

kellyrmilligan commented 11 years ago

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 commented 11 years ago

@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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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... :-1:

loxy commented 10 years ago

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

RobbinHabermehl commented 10 years ago

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

gersomvg commented 10 years ago

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 commented 10 years ago

:+1:

mullen3 commented 10 years ago

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

caitp commented 10 years ago

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 commented 10 years ago

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 commented 9 years ago

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 commented 8 years ago

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

angular / angular.js