Click not fired with ng-touch 1.3.16

[plumpNation]

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]

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]

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]

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

[petebacondarwin]

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

[RobCherry]

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

[TheTFo]

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]

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]

Yep.. this made it to 1.4 too

[NorikDavtian]

Thanks @TheTFo for narrowing this down

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

Cheers 🍻

[NorikDavtian]

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

[RobCherry]

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]

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.