angular-touch breaks click events #6001

scheffield · 2014-01-27T12:28:23Z

Hi,

Overview of the issue:
Without jQuery, all click listeners got an empty event object if the link is annotated with ng-click.

<a data-ng-click="reportClick()" data-test-listen-to-click>Link with directive</a>

Leads to:

testListenToClick#onClick; event: 
Object {preventDefault: function, stopPropagation: function}

Motivation for or Use Case
This for example breaks angular-ui-router: angular-ui/ui-router#827

Angular Version(s)
1.2.10

Browsers and Operating System
Chrome 32 with touch emulation, Chrome Mobile 32

Reproduce the error
http://jsfiddle.net/scheffield/55Skr/

Related issues
I might be wrong, but this issue looks like it has the same reason: #5307

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

adzialocha · 2014-02-26T10:39:21Z

Hey!

I think you missed passing over the $event object to the ng-click handler. Have a look here to see what is happening: https://github.com/angular/angular.js/blob/master/src/ngTouch/directive/ngClick.js#L262

element.on('click', function(event, touchend) {
      scope.$apply(function() {
        clickHandler(scope, {$event: (touchend || event)});
      });
});

I updated your fiddle: http://jsfiddle.net/55Skr/3/

Cheers!

scheffield · 2014-02-26T10:55:46Z

Hi,

my problem is the empty event object in the on.('click'... handler defined in the directive. Your updated fiddle doesn't fix this.

carlosrymer · 2014-03-29T19:58:17Z

This is still an issue. If you have a link together with ngClick, the link does not get triggered, and so navigation doesn't happen. The workaround for now is to change the location directly in the function triggered by ngClick. This isn't ideal at all. Links should just work when using ngTouch.

scheffield · 2014-03-29T20:04:19Z

Exactly. I did not examined the code, but I would guess that a element.triggerEvent is involved which emits a fake event. A sustainable solution would be to support forwarding events when calling triggerEvent.

carlosrymer · 2014-03-29T20:27:00Z

I created a directive that works around this issue. I think the ngTouch module should be updated to do exactly this. If I have some time later today, I'll submit a PR.

Here's the gist for the directive:

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

ilanbiala · 2014-08-30T20:45:18Z

@btford Why did you remove the gh:issue label?

caitp · 2014-08-30T20:46:54Z

the gh:pr and gh:issue labels were removed because they aren't really useful anymore now that GH lets you query with is:pr and is:issue

ilanbiala · 2014-08-30T21:03:05Z

Ahh okay, but this is still marked as an issue for the AngularJS team?

caitp · 2014-08-30T21:04:42Z

it's still identifiable as an issue in the issue tracker, yes

reneras · 2014-10-21T14:18:51Z

Hi @scheffield, I've just had a look together with @jeffbcross to try and reproduce this issue with the latest angular 1.3.0: http://jsfiddle.net/k78mtLg7/

Clicking an anchor with ng-click on it, within a ngTouch module, will produce this event in the click listener:
MouseEvent {dataTransfer: null, toElement: a, fromElement: null, y: 36, x: 87…}

That was without jQuery and it seems fine. Could you verify this ?

scheffield · 2014-10-21T14:56:35Z

Hi, if I enable the mobile emulation I still get a fake event object:

Object {preventDefault: function, isDefaultPrevented: function, stopImmediatePropagation: function, isImmediatePropagationStopped: function, stopPropagation: function…}defaultPrevented: trueisDefaultPrevented: function () { return this.defaultPrevented === true; }isImmediatePropagationStopped: function () { return this.immediatePropagationStopped === true; }preventDefault: function () { this.defaultPrevented = true; }stopImmediatePropagation: function () { this.immediatePropagationStopped = true; }stopPropagation: function noop() {}target: atype: "click"

iamstarkov · 2014-12-15T16:26:13Z

I found similar issue #9872 about broken ng-click on phones.

iamstarkov · 2014-12-15T16:34:19Z

So I question here too. Is any news for solution here?

scheffield · 2015-01-20T12:37:03Z

Today, I stumbled over a solution in this bug: #9872

The suggested solution is it to update the line containing

element.triggerHandler('click', [event]);

by

element[0].dispatchEvent(new MouseEvent('click', event));

A first (quick) run indicates that the provided event object now looks like a full blown MouseClick event. I'm not absolutely sure whether this is the solution but I'm very confident that.

Just a quick roundup on dispatchEvent according to http://help.dottoro.com/ljrinokx.php and http://msdn.microsoft.com/en-us/library/ie/ff975247(v=vs.85).aspx it is supported since IE9 (and of course in all other browsers). In particular the first side states:

[...] the main difference between the dispatchEvent and fireEvent methods is that the dispatchEvent method invokes the default action of the event, the fireEvent method does not.

brandonburkett · 2015-07-14T18:54:44Z

I am running into this same issue, using an anchor to close drop down nav, but also go to the new state. Sounds like it is a still an issue.

JonWallsten · 2015-09-01T12:16:32Z

I also have troubles with this. When I add a click listener with jquery in a directive the click only fires if I longpress and let go right before the longpress function fires on my device.

omegascorp · 2015-09-02T08:06:19Z

I think it is related. When add ng-click on submit button. On mobile it will fire only ng-click but will not fire ng-submit. Example and steps to reproduce here:
http://jsfiddle.net/omegascorp/egtaL3x8/3/

It is related to lines 355, 356 in angular-touch.js (https://github.com/angular/bower-angular-touch/blob/master/angular-touch.js)

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.

ghost assigned vojtajina Jan 28, 2014

btford removed the gh: issue label Aug 20, 2014

nateabele mentioned this issue Dec 5, 2014

ui-sref not working with ng-click (angular-touch) if used without jQuery angular-ui/ui-router#827

Closed

petebacondarwin mentioned this issue Dec 17, 2014

ng-touch - Child element triggers ng-click for parent #10366

Closed

petebacondarwin modified the milestones: 1.4.x, 1.3.x - superluminal-nudge Sep 9, 2015

petebacondarwin modified the milestones: 1.4.x, 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

angular-touch breaks click events #6001

angular-touch breaks click events #6001

scheffield commented Jan 27, 2014

adzialocha commented Feb 26, 2014

scheffield commented Feb 26, 2014

carlosrymer commented Mar 29, 2014

scheffield commented Mar 29, 2014

carlosrymer commented Mar 29, 2014

ilanbiala commented Aug 30, 2014

caitp commented Aug 30, 2014

ilanbiala commented Aug 30, 2014

caitp commented Aug 30, 2014

reneras commented Oct 21, 2014

scheffield commented Oct 21, 2014

iamstarkov commented Dec 15, 2014

iamstarkov commented Dec 15, 2014

scheffield commented Jan 20, 2015

brandonburkett commented Jul 14, 2015

JonWallsten commented Sep 1, 2015

omegascorp commented Sep 2, 2015

angular-touch breaks click events #6001

angular-touch breaks click events #6001

Comments

scheffield commented Jan 27, 2014

adzialocha commented Feb 26, 2014

scheffield commented Feb 26, 2014

carlosrymer commented Mar 29, 2014

scheffield commented Mar 29, 2014

carlosrymer commented Mar 29, 2014

ilanbiala commented Aug 30, 2014

caitp commented Aug 30, 2014

ilanbiala commented Aug 30, 2014

caitp commented Aug 30, 2014

reneras commented Oct 21, 2014

scheffield commented Oct 21, 2014

iamstarkov commented Dec 15, 2014

iamstarkov commented Dec 15, 2014

scheffield commented Jan 20, 2015

brandonburkett commented Jul 14, 2015

JonWallsten commented Sep 1, 2015

omegascorp commented Sep 2, 2015