Touch event on a link issue #5307

bullgare · 2013-12-06T12:06:19Z

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.

The text was updated successfully, but these errors were encountered:

tbosch · 2013-12-06T19:59:45Z

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

tbosch · 2013-12-06T20:02:46Z

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

bullgare · 2013-12-07T09:13:21Z

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:

In Google Chrome: settings -> Overrides -> Check 'Enable' and 'Emulate touch events'. After that you must see that pointer is changed to a spot.
Open console. window.location.hash is outputed there.
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 · 2014-03-29T20:25:57Z

I created a directive that works around this issue:

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

derekprior · 2014-07-03T18:46:32Z

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 · 2014-07-10T15:34:15Z

+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 · 2015-02-04T15:29:54Z

+1 this bug still exist....

MaciejHadam · 2015-03-12T21:11:48Z

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

stianlp · 2015-04-26T13:47:06Z

+1

xinsight · 2015-04-27T17:55:12Z

+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 · 2015-05-26T21:25:53Z

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 · 2015-06-23T20:20:31Z

+1

mping · 2015-06-25T15:18:53Z

+1 Same bug here.

fishermanswharff · 2015-07-12T12:41:45Z

+1

arifeng · 2015-07-24T15:27:06Z

+1

tspore · 2015-07-27T22:39:53Z

+1

eantze · 2015-07-29T22:41:50Z

+1

maseh87 · 2015-08-05T15:44:48Z

+1

derekprior · 2015-08-05T16:57:00Z

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 · 2015-08-05T17:20:15Z

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.

fixes angular#5307

changes browser url on elements with ng-click if element has an href attribute fixes angular#5307

asfaltboy · 2015-10-14T07:35:05Z

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?).

… menu On touch devices, AngularJS directive does not work with href attribute (angular/angular.js#5307). Thus clicking on the logo was closing the menu but wasn't navigating to the home page. Also profile link was navigating to the profile page but not closing the menu.

This commit removes the ngClick directive from the ngTouch module. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why this feature has been removed: - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#13287 Closes angular#13558 Closes angular#12392 Closes angular#12153 Closes angular#11358 Closes angular#6432 Closes angular#12867 Closes angular#7231 Closes angular#13213 Closes angular#12082 Closes angular#4030 Closes angular#12545 Closes angular#6001 Closes angular#5307 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#12734 Closes angular#12455 Closes angular#11197 Closes angular#11261 Closes angular#12150 Closes angular#10918 Closes angular#10366 Closes angular#9872 Closes angular#9744 Closes angular#6251 Closes angular#4428 Closes angular#3999 Closes angular#3347 Closes angular#3296 Closes angular#7935 Closes angular#13272 Closes angular#13447 Closes angular#13122 Closes angular#12317 Closes angular#11577 Closes angular#11342 Closes angular#10211 Closes angular#9724 Closes angular#7134 Closes angular#6330 Closes angular#3447 BREAKING CHANGE: The `ngClick` override from the `ngTouch` module has been removed. This means that on touch-based devices, users might experience a 300ms delay before an ngClick event is fired. If you rely on this behavior, consider using [FastClick](https://github.com/ftlabs/fastclick) or [Tappy!](https://github.com/filamentgroup/tappy/). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this article for more info on the topic: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/

This commit removes the ngClick directive from the ngTouch module. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why this feature has been removed: - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#4030 Closes angular#5307 Closes angular#6001 Closes angular#6432 Closes angular#7231 Closes angular#11358 Closes angular#12082 Closes angular#12153 Closes angular#12392 Closes angular#12545 Closes angular#12867 Closes angular#13213 Closes angular#13558 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#3296 Closes angular#3347 Closes angular#3447 Closes angular#3999 Closes angular#4428 Closes angular#6251 Closes angular#6330 Closes angular#7134 Closes angular#7935 Closes angular#9724 Closes angular#9744 Closes angular#9872 Closes angular#10211 Closes angular#10366 Closes angular#10918 Closes angular#11197 Closes angular#11261 Closes angular#11342 Closes angular#11577 Closes angular#12150 Closes angular#12317 Closes angular#12455 Closes angular#12734 Closes angular#13122 Closes angular#13272 Closes angular#13447 BREAKING CHANGE: The `ngClick` override directive from the `ngTouch` module has been removed. This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired. If you rely on this behavior, consider using [FastClick](https://github.com/ftlabs/fastclick) or [Tappy!](https://github.com/filamentgroup/tappy/). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this article for more info on the topic: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/

…ault This commit deprecates the ngClick directive from the ngTouch module. Additionally, it disables it by default. It can be enabled in the new $touchProvider with $touchProvider.ngClickOverrideEnabled() method. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why the directive is being deprecated. - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#4030 Closes angular#5307 Closes angular#6001 Closes angular#6432 Closes angular#7231 Closes angular#11358 Closes angular#12082 Closes angular#12153 Closes angular#12392 Closes angular#12545 Closes angular#12867 Closes angular#13213 Closes angular#13558 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#3296 Closes angular#3347 Closes angular#3447 Closes angular#3999 Closes angular#4428 Closes angular#6251 Closes angular#6330 Closes angular#7134 Closes angular#7935 Closes angular#9724 Closes angular#9744 Closes angular#9872 Closes angular#10211 Closes angular#10366 Closes angular#10918 Closes angular#11197 Closes angular#11261 Closes angular#11342 Closes angular#11577 Closes angular#12150 Closes angular#12317 Closes angular#12455 Closes angular#12734 Closes angular#13122 Closes angular#13272 Closes angular#13447 BREAKING CHANGE: The `ngClick` override directive from the `ngTouch` module is **deprecated and disabled by default**. This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired. If you rely on this directive, you can still enable it with the `$touchProvider.ngClickOverrideEnabled()`method: ```js angular.module('myApp').config(function($touchProvider) { $touchProvider.ngClickOverrideEnabled(true); }); ``` For migration, we recommend using [FastClick](https://github.com/ftlabs/fastclick). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this [article by Telerik](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/) for more info on the topic. Note that this change does not affect the `ngSwipe` directive.

This commit deprecates the ngClick directive from the ngTouch module. Additionally, it disables it by default. It can be enabled in the new $touchProvider with $touchProvider.ngClickOverrideEnabled() method. The directive was conceived to remove the 300ms delay for click events on mobile browsers, by sending a synthetic click event on touchstart. It also tried to make sure that the original click event that the browser sends after 300ms was "busted", so that no redundant "ghost-clicks" appear. There are various reasons why the directive is being deprecated. - "This is an ugly, terrible hack!" (says so in the source) - It is plagued by various bugs that are hard to fix / test for all platforms (see below) - Simply including ngTouch activates the ngClick override, which means even if you simply want to use ngSwipe, you may break parts of your app - There exist alternatives for removing the 300ms delay, that can be used very well with Angular: [FastClick](https://github.com/ftlabs/fastclick), [Tappy!](https://github.com/filamentgroup/tappy/) (There's also hammer.js for touch events / gestures) - The 300ms delay itself is on the way out - Chrome and Firefox for Android remove the 300ms delay when the usual `<meta name="viewport" content="width=device-width">` is set. In IE, the `touch-action` css property can be set to `none` or `manipulation` to remove the delay. Finally, since iOs 8, Safari doesn't delay "slow" taps anymore. There are some caveats though, which can be found in this excellent article on which this summary is based: http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ Note that this change does not affect the `ngSwipe` directive. Issues with interactive elements (input, a etc.) when parent element has ngClick: Closes angular#4030 Closes angular#5307 Closes angular#6001 Closes angular#6432 Closes angular#7231 Closes angular#11358 Closes angular#12082 Closes angular#12153 Closes angular#12392 Closes angular#12545 Closes angular#12867 Closes angular#13213 Closes angular#13558 Other issues: - incorrect event order - incorrect event propagation - ghost-clicks / failing clickbusting with corner cases - browser specific bugs - et al. Closes angular#3296 Closes angular#3347 Closes angular#3447 Closes angular#3999 Closes angular#4428 Closes angular#6251 Closes angular#6330 Closes angular#7134 Closes angular#7935 Closes angular#9724 Closes angular#9744 Closes angular#9872 Closes angular#10211 Closes angular#10366 Closes angular#10918 Closes angular#11197 Closes angular#11261 Closes angular#11342 Closes angular#11577 Closes angular#12150 Closes angular#12317 Closes angular#12455 Closes angular#12734 Closes angular#13122 Closes angular#13272 Closes angular#13447 BREAKING CHANGE: The `ngClick` override directive from the `ngTouch` module is **deprecated and disabled by default**. This means that on touch-based devices, users might now experience a 300ms delay before a click event is fired. If you rely on this directive, you can still enable it with the `$touchProvider.ngClickOverrideEnabled()`method: ```js angular.module('myApp').config(function($touchProvider) { $touchProvider.ngClickOverrideEnabled(true); }); ``` For migration, we recommend using [FastClick](https://github.com/ftlabs/fastclick). Also note that modern browsers remove the 300ms delay under some circumstances: - Chrome and Firefox for Android remove the 300ms delay when the well-known `<meta name="viewport" content="width=device-width">` is set - Internet Explorer removes the delay when `touch-action` css property is set to `none` or `manipulation` - Since iOs 8, Safari removes the delay on so-called "slow taps" See this [article by Telerik](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/) for more info on the topic. Note that this change does not affect the `ngSwipe` directive.

David-Tsui · 2016-10-27T06:09:54Z

still exists, I think

Narretz · 2016-10-27T07:21:48Z

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 · 2016-10-27T15:35:46Z

Dne 27. 10. 2016 8:12 napsal uživatel "David-Tsui" <[email protected]

:

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 · 2016-10-27T16:10:38Z

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).

ghost assigned tbosch Dec 6, 2013

scheffield mentioned this issue Jan 27, 2014

angular-touch breaks click events #6001

Closed

btford removed the gh: issue label Aug 20, 2014

grabbeh mentioned this issue Feb 11, 2015

Android Chrome doesn't recognise click events on 'li' element grabbeh/fennec#38

Closed

ca136 pushed a commit to ca136/angular.js that referenced this issue Aug 10, 2015

fix(ngTouch): allow use of href and ng-click with ng-touch

ef6c6ea

fixes angular#5307

ca136 pushed a commit to ca136/angular.js that referenced this issue Aug 10, 2015

fix(ngTouch): allow use of href and ng-click with ng-touch

3301822

changes browser url on elements with ng-click if element has an href attribute fixes angular#5307

ca136 mentioned this issue Aug 10, 2015

fix(ngTouch): allow use of href and ng-click with ng-touch #12545

Closed

ca136 pushed a commit to ca136/angular.js that referenced this issue Aug 10, 2015

fix(ngTouch): allow use of href and ng-click with ng-touch

3f276e8

changes browser url on elements with ng-click if element has an href attribute fixes angular#5307

petebacondarwin modified the milestones: Backlog, ngTouch Overhaul Jan 26, 2016

Narretz mentioned this issue Jan 26, 2016

fix(ngTouch): remove ngClick override #13852

Closed

Narretz mentioned this issue Jan 27, 2016

fix(ngTouch): deprecate ngClick override directive, disable it by def… #13857

Closed

Narretz closed this as completed in 0dfc1df Jan 27, 2016

angular locked and limited conversation to collaborators Oct 27, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Touch event on a link issue #5307

Touch event on a link issue #5307

bullgare commented Dec 6, 2013

tbosch commented Dec 6, 2013

tbosch commented Dec 6, 2013

bullgare commented Dec 7, 2013

carlosrymer commented Mar 29, 2014

derekprior commented Jul 3, 2014

npepinpe commented Jul 10, 2014

ostux commented Feb 4, 2015

MaciejHadam commented Mar 12, 2015

stianlp commented Apr 26, 2015

xinsight commented Apr 27, 2015

WraithKenny commented May 26, 2015

pimlinders commented Jun 23, 2015

mping commented Jun 25, 2015

fishermanswharff commented Jul 12, 2015

arifeng commented Jul 24, 2015

tspore commented Jul 27, 2015

eantze commented Jul 29, 2015

maseh87 commented Aug 5, 2015

derekprior commented Aug 5, 2015

WraithKenny commented Aug 5, 2015

asfaltboy commented Oct 14, 2015

David-Tsui commented Oct 27, 2016

Narretz commented Oct 27, 2016

rendisek70 commented Oct 27, 2016

Narretz commented Oct 27, 2016

Touch event on a link issue #5307

Touch event on a link issue #5307

Comments

bullgare commented Dec 6, 2013

tbosch commented Dec 6, 2013

tbosch commented Dec 6, 2013

bullgare commented Dec 7, 2013

carlosrymer commented Mar 29, 2014

derekprior commented Jul 3, 2014

npepinpe commented Jul 10, 2014

ostux commented Feb 4, 2015

MaciejHadam commented Mar 12, 2015

stianlp commented Apr 26, 2015

xinsight commented Apr 27, 2015

WraithKenny commented May 26, 2015

pimlinders commented Jun 23, 2015

mping commented Jun 25, 2015

fishermanswharff commented Jul 12, 2015

arifeng commented Jul 24, 2015

tspore commented Jul 27, 2015

eantze commented Jul 29, 2015

maseh87 commented Aug 5, 2015

derekprior commented Aug 5, 2015

WraithKenny commented Aug 5, 2015

asfaltboy commented Oct 14, 2015

David-Tsui commented Oct 27, 2016

Narretz commented Oct 27, 2016

rendisek70 commented Oct 27, 2016

Narretz commented Oct 27, 2016