Touch event on a link issue

[bullgare]

It's in AngularJS 1.2.3. This is only happening on touch devices or in Google Chrome with touch event emulation enabled. This link works (redirects to the url): <a href="#/search">search</a> And this link doesn't (no redirect occurs on tap): <a href="#/search" ng-click="v = 1">search</a> Click handler invoked and after that something strange happens inside of element.on('touchend', function(event) (angular-touch.js:385). Somehow it decides to prevent event by calling preventGhostClick(x, y); It's really sad because it blocked our big mobile app to use AngularJS 1.2.3 in production. We're still on 1.0.8.

[tbosch]

Hi, thanks for reporting this. Could you provide a jsfiddle or plunk?

[tbosch]

A workaround could be to use an empty href and put the navigation logic into ng-click using $location.

[bullgare]

Thanks for your advice. But I used another workaround. I did all I needed without ng-click. But it's still a bug as I think. And finally i understood how to demonstrate this.

The steps are:

1. In Google Chrome: settings -> Overrides -> Check 'Enable' and 'Emulate touch events'. After that you must see that pointer is changed to a spot.
2. Open console. window.location.hash is outputed there.
3. Open each jsbin. The difference between them is in using and not using 'ngTouch' module. Inside ng-click handler I flush location.hash and after some timeout hope hash to be changed to the url in the href attribute. This one works (ngTouch disabled) - http://jsbin.com/iwoPuDIZ/1/edit?html,js,output This one is broken (ngTouch enabled) - http://jsbin.com/izIDAla/1/edit?html,js,output

[carlosrymer]

I created a directive that works around this issue:

https://gist.github.com/carlosrymer/9862232

[derekprior]

What is the reasoning behind stopping event propagation? It also prevents dropdown menu type functionality such as this:

<p ng-click="showMenu = !showMenu">Menu</p>

<ul ng-click="showMenu = false" ng-show="showMenu">
  <li><a href="/foo">Foo</a></li>
  <li><a href="/bar">Bar</a></li>
</ul>

The ng-click on the ul fires, which has the effect of closing the menu, but the navigation on the a does not occur.

[npepinpe]

+1

This is a rather problematic bug. I ended up simply listening to touchend since our webapp is strictly mobile, but it would be much nicer to use ng-click as is.

[ostux]

+1 this bug still exist....

[MaciejHadam]

default behaviour of link is broken, +1 to fix this bug

[stianlp]

+1

[xinsight]

+1 Another workaround is to add the following into your ng-click handler.

// <a ng-click="hideMenu($event)" ng-href="#/settings">
$scope.hideMenu = function (event) {
    // ...
    var href = angular.element(event.target).attr('href');
    if (event.type === 'touchend' && href) {
        href = href.substring(1); // remove initial #
        $location.path(href);
    }
};

[WraithKenny]

It'd be nice if we can get a response on wether this is a bug or a feature...I think it's a bug, but I'm new to Angular...

Is it recommended to not use ngHref when also using ngClick? If it is, I'll deal with it I guess, otherwise, it'd be nice to have this confirmed as a bug, and we can expect a bug fix sometime in the future.

(It was very unexpected, that when I added ngTouch for the swipe functionality, that this broken large portions of my app in ways that weren't readily obvious.)

[pimlinders]

+1

[mping]

+1 Same bug here.

[fishermanswharff]

+1

[arifeng]

+1

[tspore]

+1

[eantze]

+1

[maseh87]

+1

[derekprior]

Please stop with the +1ing. It's not adding anything to the discussion of the actual issue and only unnecessarily emails people who are watching this issue for actual progress.

[WraithKenny]

Better, is to wait on Angular 2 and hope that doesn't have this bug. Just unsubscribe because there will probably never be any progress on this bug in version 1.

[asfaltboy]

There seems to be some code that ensures the tap did not "end" too far away from origin, called clickbuster.

This may be related to the CLICKBUSTER_THRESHOLD, which is set to 25px (too small for chubby thumbs?).

[David-Tsui]

still exists, I think

[Narretz]

The touch override from ngTouch has been disabled by default since 1.5.0, so I doubt this issue still exists in this version. It may be an issue with 3rd party touch handlers. There's also a point to be made that having a click handler on a link is bad for accessibility.

[rendisek70]

Dne 27. 10. 2016 8:12 napsal uživatel "David-Tsui" <notifications@github.com

:

still exists, I think

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Narretz]

I am going to lock this issue, as I don't think we can lead a constructive discussion here. Please open a new issue with a clear description and a runnable example if you have problems with this in the current Angular version (1.5.8).