NgTouch ngClick does not bubble

Question

From the ngTouch ngClick documentation :

A more powerful replacement for the standard ngClick, designed for use on touch devices. Most mobile browsers wait about 300 ms after being clicked and released before sending a click event. This version processes them immediately and then prevents the distribution of the next click event.

This creates an inconsistent behavior in that on the computer the click event continues to bubble / propagate, but on the mobile device it stops. This means that any directives higher in dom that listen for clicks on elements fail. It seems like a mistake, but I should not be the first to do this.

If you look at ngTouch, the problem stems from line 453

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

Angular docs :

angular.element delegates to Angular a built-in subset of jQuery called "jQuery lite" or "jqLite".

jqLite has access to jQuery triggerHandler , but not trigger .

jQuery docs :

The .triggerHandler () method behaves similarly to .trigger (), with the following exceptions:

• Events triggered with .triggerHandler () do not create a DOM bubble hierarchy; if they are not directly processed by the target element, they do nothing.

So, Angular users need to add trigger support in jqLite and change this line to trigger so that it works correctly.

Meanwhile, how can I get around this? Is there a way to use ngClick inside a custom directive?

---

Bonus for laughter: Comment from ngTouch source code

 // This is an ugly, terrible hack! // Yeah, tell me about it. 

Answer 1

I replaced line 453 with

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

Now it works as expected. Not sure what browser compatibility is for new MouseEvent() , so feel free to comment if you have any.

Answer 2

in addition to the above solution, I also had to add ng-click = "" for each of my anchors to make this work.

note: I would rather write this as a comment, but stackoverflow doesn't feel like I deserve the right. excuse me.

Answer 3

Newer versions of ngTouch 1.5.3+ should no longer have this problem. See https://github.com/angular/angular.js/commit/0dfc1dfebf26af7f951f301c4e3848ac46f05d7f

It was a byproduct of the ngTocuh code, designed to overcome the 300 ms mobile browser delay problem. See http://developer.telerik.com/featured/300-ms-click-delay-ios-8/ for more details.