Avoid click when child clicked...?

How-to Discussions
1

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…?

2

Hi!

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.

3

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:

4

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.