angular-touch breaks click events

[scheffield]

Hi,

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

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

Leads to:

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

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

Angular Version(s)
1.2.10

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

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

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

[adzialocha]

Hey!

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

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

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

Cheers!

[scheffield]

Hi,

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

[carlosrymer]

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

[scheffield]

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

[carlosrymer]

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

Here's the gist for the directive:

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

[ilanbiala]

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

[caitp]

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

[ilanbiala]

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

[caitp]

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

[reneras]

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

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

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

[scheffield]

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

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

[iamstarkov]

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

[iamstarkov]

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

[scheffield]

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

The suggested solution is it to update the line containing

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

by

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

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

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

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

[brandonburkett]

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

[JonWallsten]

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

[omegascorp]

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

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