Native click event of inner element busted by outer ngClick element

[jackysee]

When there is a nested structure, e.g.

<div ng-click="action()">
    <button my-click>mybutton</my-button>
    <p>lipsum....</p>
</div>

where my-click is a directive that have native click binding:

link: function(scope, el, attrs){
    el.on('click', function(ev){ 
       //...some other action
       // ev.stopPropagation() won't work as ngTouch use event capture
    });
}

The native click event won't call when click on the button. The click event is busted. The outer div has raised touchstart and touchend and thus busted all internal click event from nested element. You cannot stop the event propagation from button to div as it is capturing mode.

demo at http://plnkr.co/edit/NQ09S0EGqoiPs6QTIhLY?p=preview

[Narretz]

Just to clarify, this happens only when ngTouch is included?

[jackysee]

Yes. The inner element native click can be called when no ngTouch

[victorivens05]

I'm having trouble with angular 1.4.2+ where I can't open the Select when it's inside of an element with ng-click and I think the problems are related.

Here is a fiddle with the problem:
http://jsfiddle.net/fq4onqkt/1/

To see the problem you need to turn the device emulation in chrome dev tools. Without the ngTouch or without the ng-click it works properly.

[martinmcwhorter]

NgTouch seems to break the expected behavior of ng-click. Even nested elements with ng-click only the outer element event handler will be triggered. It seems NgTouch needs a large overhaul.

[martinmcwhorter]

This is a long standing bug that does not look like it will be fixed any time soon. I found an alternative. Include hammerjs and use angular-hammer from https://ryanmullins.github.io/angular-hammer/