Avoid click when child clicked...?

Don´t really know how to better explain this…and just wanted to get tips/best practices for how to solve a thing;

I have a DockPanel (looped with ‘Each’) for a list like thingy. In this DockPanel I have a ‘Text’ and an ‘Image’ element. I have a Clicked-tag for this DockPanel…but also has a Clicked-tag within the image-tag contained in this DockPanel…to get image clicks.

Of course, when clicking this image, the Clicked for the DockPanel also fires.

What´s the best way to solve this? Split DockPanel in smaller panels…?


In your clicked event for your dock panel, you can check the data property on the event argument to see where the event came from:

function dockpanel_clicked(e)
    if (e.data !== data_for_dockpanel) return;

    // handle event

data_for_dockpanel would be the JS object used to generate the dockpanel in data binding, or module.exports if this dockpanel is a root thing.

This feature is rolling out soon which will make it even easier:

<DockPanel ux:Name="dock1" Clicked="{clicked}">

And in JS:

function clicked(e)
    if (e.sender !== "dock1") return;

    // handle event

Not yet released as of v0.5.3715, but coming in a near future release :slight_smile:

Thanx for the tip/explanation. I ended up having the second click-handler on the text instead…I managed to get the clickable area as large as I wanted by tweaking some padding (not just firing at the actual text/label). But anyways, thanx.