SAPUI5: Handle click events properly

Question

I am using the SAPUI5 control GenericTile and added both headerImage and click event. When this icon is clicked, the event handler of the tile is triggered first so that I am not able to react on the icon click itself (which should perform another action of course).

var oGenericTile = new sap.suite.ui.commons.GenericTile({
                frameType: "TwoByOne",
                header: "My HEader",
                headerImage: "sap-icon://settings",
                tileContent: oTileContent
            });

oGenericTile._oImage.attachPress(function(oEvent) {
                sap.m.MessageToast.show("Icon has been pressed");
                oEvent.cancelBubble();
                oEvent.preventDefault();
            });

            oGenericTile.attachPress(function() {
                sap.m.MessageToast.show("I am always triggered first!!!   :-(");
            });`

Any idea how I can avoid this?

Solution

you could e.g. also cancel the event on the tile manually in order to avoid this behavior... you'd just need to track whether the icon has been pressed, see a simplified example on JSBin: http://jsbin.com/daqifomoge/3/edit

Extending existing controls and overriding methods always bears the potential to break things when the original control gets an update from the developers...

Maybe there's a more elegant way to do it, though.

Best, Christiane