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

ngTouch prevents focusing inputs at or below ngClick #12153

Closed
OlenDavis opened this issue Jun 17, 2015 · 16 comments
Closed

ngTouch prevents focusing inputs at or below ngClick #12153

OlenDavis opened this issue Jun 17, 2015 · 16 comments

Comments

@OlenDavis
Copy link
Contributor

You can see my comment on this commit here to explain the problem with that commit further. But, I truly don't understand how in an attempt to bust the redundant, original/"ghost click" click event (because it's being done faster than the original thanks to this wonderful work) we would also want to prevent the very likely intended behavior of also focusing a clicked focusable element. After all, it isn't as if this focusing behavior is also redundant; ngTouch's ngClick doesn't also focus the element if focusable when it triggers the click event. But before I contribute either a removal of this blurring "feature", or the addition of a speedier focusing feature, do you all agree that something must be done?

Because FYI, (and I'm sure I'm not the only one) my organization is relying my own copy of Angular just to remove this one line of code. (...which happened to break the login for my company's site, as well as all other inputs in all other dialogs, and even gave pause to my CTO that we should even be utilizing Angular to the extent we are considering this bug was because of migrating to 1.4.0 - though technically a minor release, it's hardly a minor release)

@OlenDavis OlenDavis changed the title fix(ngClick) ngTouch prevents focusing any inputs at or below an ngClick fix(ngClick) ngTouch prevents focusing inputs at or below ngClick Jun 17, 2015
@OlenDavis OlenDavis changed the title fix(ngClick) ngTouch prevents focusing inputs at or below ngClick ngTouch prevents focusing inputs at or below ngClick Jun 17, 2015
@xnuter
Copy link

xnuter commented Jun 17, 2015

+1

Can it be fixed in 1.4.2?

@Narretz
Copy link
Contributor

Narretz commented Jun 18, 2015

Hmm, interesting. I don't even understand what problem 0bbd20f is trying to solve. Can someone give an example?

@Narretz
Copy link
Contributor

Narretz commented Jun 18, 2015

BTW, you don't need to maintain a complete copy of angular, you can do the same ngTouch does - decorate the ngClick directive. In practice, that means you'll have to copy most of ngTouch's code, but you can do it in a more maintainable way.

@adamreisnz
Copy link

This is also causing us serious problems, because it basically makes any input element which is a child element of a parent element which has a ng-click directive unclickable.

@JudahGabriel
Copy link

This blocks me from using ngTouch as well. I have a div that has an ng-click handler on it. Then, inside that div, I have a text input. On mobile, the text input cannot be focused. Only solution I've found is to remove ngTouch.

@walliski
Copy link

We seem to have problems with this ^ also.

@ymaz
Copy link

ymaz commented Nov 26, 2015

I have the same issue with ng-touch and input with ng-click...

@jpodpro
Copy link

jpodpro commented Dec 1, 2015

+1
my simple bootstrap nav doesn't work with ngTouch - isn't this a glaring problem?

@ymaz
Copy link

ymaz commented Dec 1, 2015

Any news?

@ymaz
Copy link

ymaz commented Dec 1, 2015

Replaced ngTouch with classic FastClick and it's works like a charm for me.

@russhendy
Copy link

I'm finding this a problem too. Please let us know when this is addressed!

@dlhuffmanjr
Copy link

If you do not mind me asking: how did you replace ngTouch? Did you
include it and then pull in another library to decorate it, or did you not
include ngTouch and go with the Fastclick proper and then attach in a run
block? The latter is the approach that I took with
angular-stateful-fastclick which is working fine; however, I now have a
dependency on yet another library which could make migrating to later
versions of Angular more difficult.

I apologize for asking here as realize this query is better suited for
something like SO.

On Tue, Dec 1, 2015 at 7:49 AM, Andrew Ymaz notifications@github.com
wrote:

Replaced ngTouch with classic FastClick and it's works like a charm for me.


Reply to this email directly or view it on GitHub
#12153 (comment)
.

@dimger89
Copy link

we have the same issue, if somebody has anwer how to fix it, please share

@adamreisnz
Copy link

The blunt "solution" we took was to simply remove ngTouch. Although an
alternative could be that you make the code changes preventing this
behaviour in the module yourself, and include that copy in your application
instead of the one from your package manager.

On Sun, 17 Jan 2016 at 06:18 dimger89 notifications@github.com wrote:

we have the same issue, if somebody has anwer how to fix it, please share


Reply to this email directly or view it on GitHub
#12153 (comment)
.

@dimger89
Copy link

Please update that thread if smb will find way to change that behaviour. For now I'll probably remove it.

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.
@adamreisnz
Copy link

Thanks for that!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.