ngTouch ngClick doesn't bubble

Question

From the ngTouch ngClick documentation:

A more powerful replacement for the default ngClick designed to be used on touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-release before sending the click event. This version handles them immediately, and then prevents the following click event from propagating.

This creates inconsistent behavior in that on a computer, the click event continues to bubble/propagate, but on mobile, it stops. This means that any directives higher in the dom that listen for element clicks fail. Seems like a bug to me, but I must not be the first person to have to work around this.

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

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

Angular docs:

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

jqLite has access to jQuery's triggerHandler, but not trigger.

jQuery docs:

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

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

So the Angular folks need to add trigger support to jqLite and change that line to trigger for it to work properly.

In the meantime, how can I work around this? Is there a way to use ngClick inside of a custom directive?

---

Bonus for laughs: Comment from the ngTouch source code

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

Answer 1

I've replaced line 453 with

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

It's working as expected for now. Not sure what browser compatibility is like for new MouseEvent(), so feel free to comment if you are.