I am trying to prevent click event propagation when a view header or modal header is covered by an overlay div. The div represents a notification and on click I would like it to perform a redirect. The issue is that the click event bubbles through to the view header / modal header buttons when I would like to stop this happening. I can’t work out how to prevent this behaviour. Any help would be very much appreciated. I have tried:
pointer-events: none !important;
Passing $event into the ng-click to try:
I have also tried at the end of the ng-click function:
I have tried the ionic class:
and have also tried the ionic directive:
I have reproduced this behaviour in a codepen, please resize the viewport in the pen to ensure that when the modal is opened it takes up the full viewport. The behaviour can be replicated by clicking on the notification above the underlying header buttons both with modal open and without.
Any help would be appreciated, I can’t get my head around it.