Click not fired with ng-touch 1.3.16 #12082

plumpNation · 2015-06-11T11:18:42Z

I have removed all directives except ng-click from a non responsive button.

On touch devices I only see CSS change styles to :active, but the callback for ng-click does not run.

I am using Chrome 43.0 on Android but am seeing this with Safari on iPhone, and IE on windows phone too.

I remove ng-touch and the problem disappears. I downgrade to 1.3.15 and the problem is gone.

I'm fixing the version to 1.3.15 for now in my bower.json.

TheTFo · 2015-06-12T15:47:31Z

I'm seeing similar problems with 1.3.16 with my desktop touchscreen. Only in Chrome 43, appears to work fine in IE and FF.

I've also pegged to 1.3.15 for the time being.

fatpaul · 2015-06-15T09:09:37Z

Seeing a very similar problem, I have a ng-click on the body tag to listen for clicks and get rid of a main menu that is sometimes displayed. With the new version of Angular (that has the new jQuery touch event support) 1.3.16, the click event seems to be swallowed up after the body tag click, so no propagation occurs down the dom so no other dom elements get the event.

So doing the same as you guys and pegging to 1.3.15

TheTFo · 2015-07-08T14:50:05Z

Did this get into 1.3.17? I'm still seeing this problem

petebacondarwin · 2015-09-15T12:39:44Z

We are not actively working on fixes for 1.3.x. We will try to fix it in 1.4.x.

RobCherry · 2015-10-22T15:58:21Z

I am still seeing this issue in 1.4.7. Is there any ETA on this?

TheTFo · 2015-10-22T16:04:37Z

I havn't confirmed, however, my teammate mentioned you can get around this on a tags if you don't use both an href and and ng-click event.

RobCherry · 2015-10-22T19:12:41Z

Yeah, I ended up decorating the ngTouch module's ngClick directive.

angular.module('ngTouch').config(['$provide', function($provide) {
  $provide.decorator('ngClickDirective', ['$delegate', '$parse', function($delegate, $parse) {
    var ACTIVE_CLASS_NAME = 'ng-click-active';
    $delegate[0].compile = function($element, attr) {
      var fn = $parse(attr.ngClick, null, true);
      return function (scope, element) {
        // Hack for iOS Safari's benefit. It goes searching for onclick handlers and is liable to click
        // something else nearby.
        element.onclick = function() { };

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

        element.on('mousedown touchstart', function() {
          element.addClass(ACTIVE_CLASS_NAME);
        });

        element.on('mousemove mouseup touchend touchcancel', function() {
          element.removeClass(ACTIVE_CLASS_NAME);
        });
      };
    };

    return $delegate;
  }])
}]);

We were already using FastClick so the enhancements to ngClick were not particularly useful, but we needed ngTouch for $swipe.

NorikDavtian · 2015-10-30T21:44:03Z

Yep.. this made it to 1.4 too

…if no coordinates. If there is anchor with ng-click on it the click event was not triggering. fixes angular#12082

NorikDavtian · 2015-10-31T05:06:12Z

Thanks @TheTFo for narrowing this down

@RobCherry Would you please verify if the pull request fixes your issue as well.

Cheers 🍻

NorikDavtian · 2015-10-31T09:59:32Z

ok looks like might need to do some refactoring here and run the tests.. fixes one breaks the other 😞

RobCherry · 2015-11-03T00:38:07Z

To provide a little more information than I did in my previous comment, the real problem is that the simulated click coming out of ngTouch is not bubbling up the DOM. Prior to the jQuery fix in 1.3.16 the ngTouch variant of ngClick was not doing anything because the presence of jQuery essentially caused it to fall back to the default behavior.

martinmcwhorter · 2015-11-04T14:33:11Z

I am seeing this with ngTouch v1.5.0-build.4370+sha.7c792f4

In my template I have

        <ul class="nav navbar-nav" ng-switch="'top.featured' | isState " disable-ng-animate ng-click="navCollapsed = true">
                <li class="hidden-xs">
                    <div>
                        <a ui-sref="foo">
                            Foo
                        </a>
                    </div>
                </li>
                <li class="hidden-xs">
                    <div>
                        <a ui-sref="bar">
                            Bar
                        </a>
                    </div>
                </li>
              </ul>

If I click either of the links, the navCollapsed property is set true, but the click event never gets to the ui-sref -- or even a default handler. Removing the ng-click in the ul tag is a workaround, but not ideal.

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.

Narretz added severity: regression component: ngTouch branch: 1.3.x type: bug labels Jun 15, 2015

Narretz added this to the 1.3.17 milestone Jun 15, 2015

matsko modified the milestones: 1.3.19, 1.3.17 Aug 18, 2015

petebacondarwin modified the milestones: 1.4.x, 1.3.19 Sep 15, 2015

NorikDavtian pushed a commit to NorikDavtian/angular.js that referenced this issue Oct 31, 2015

Send original event to triggerHandler and bypass prevent ghost click …

b4f600f

…if no coordinates. If there is anchor with ng-click on it the click event was not triggering. fixes angular#12082

NorikDavtian mentioned this issue Oct 31, 2015

fixes #12082 (ngTouch regression since 1.3) #13213

Closed

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

Click not fired with ng-touch 1.3.16 #12082

Click not fired with ng-touch 1.3.16 #12082

plumpNation commented Jun 11, 2015

TheTFo commented Jun 12, 2015

fatpaul commented Jun 15, 2015

TheTFo commented Jul 8, 2015

petebacondarwin commented Sep 15, 2015

RobCherry commented Oct 22, 2015

TheTFo commented Oct 22, 2015

RobCherry commented Oct 22, 2015

NorikDavtian commented Oct 30, 2015

NorikDavtian commented Oct 31, 2015

NorikDavtian commented Oct 31, 2015

RobCherry commented Nov 3, 2015

martinmcwhorter commented Nov 4, 2015

Click not fired with ng-touch 1.3.16 #12082

Click not fired with ng-touch 1.3.16 #12082

Comments

plumpNation commented Jun 11, 2015

TheTFo commented Jun 12, 2015

fatpaul commented Jun 15, 2015

TheTFo commented Jul 8, 2015

petebacondarwin commented Sep 15, 2015

RobCherry commented Oct 22, 2015

TheTFo commented Oct 22, 2015

RobCherry commented Oct 22, 2015

NorikDavtian commented Oct 30, 2015

NorikDavtian commented Oct 31, 2015

NorikDavtian commented Oct 31, 2015

RobCherry commented Nov 3, 2015

martinmcwhorter commented Nov 4, 2015