Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ngTouch ngClick doesn't bubble #9872

Closed
willlma opened this issue Nov 1, 2014 · 4 comments
Closed

ngTouch ngClick doesn't bubble #9872

willlma opened this issue Nov 1, 2014 · 4 comments

Comments

@willlma
Copy link

willlma commented Nov 1, 2014

When using ngClick on mobile, ngTouch

prevents the following click event from propagating.

And the custom click event it triggers doesn't propagate.

This creates inconsistent behavior in that on a computer, the click event continues to bubble/propagate, but on mobile, it stops. This means that any directives higher in the dom that listen for element clicks fail.

See my SO question for more details.

@caitp
Copy link
Contributor

caitp commented Nov 11, 2014

I feel like this is probably not going to be fixed, but it looks like you guys have discussed possible solutions on SO, so if you're interested, why not write a patch with tests so we can review it?

@iamstarkov
Copy link

Hi, all! Is any news here?

@willlma
Copy link
Author

willlma commented Dec 18, 2014

If you look at my stackoverflow question, you'll see that you can replace a single line to make it work. Not sure how to write tests and though I know it's all over the documentation, I haven't had the time to go read up. If you do, please feel free to follow up on @caitp's suggestion.

Solutions as of now are to simply change that line and use your own version of ng-touch and/or use fastclick and just use normal click listeners in your own directives.

@AddoSolutions
Copy link

This doesn't make any sense, so for someone to use this, it has to be written for the sole purpose of a mobile app-only?

Couldn't there be a configuration option for this?

@petebacondarwin petebacondarwin modified the milestones: Backlog, ngTouch Overhaul Jan 26, 2016
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 26, 2016
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/
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 26, 2016
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/
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 26, 2016
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/
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
…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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
…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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
…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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
…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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
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.
Narretz added a commit to Narretz/angular.js that referenced this issue Jan 27, 2016
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.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.