How to do on:click event on Table.Row without it triggering to one of Table.Cell

[devpapi0891]

Hey guys I hope you're all doing well. I need some help with implementing an on:click event on Table.Row without it triggering when clicking on one Table.Cell where I want to add a DropDownMenu Component.

My problem is when I try to click on a Dropdown, the on:click event in my Table.Row triggers which I don;t want to.

Here is my example code

<Table.Row on:click={() => alert('test')}> // on:click event HERE <Table.Cell>John Doe</Table.Cell> <Table.Cell>johndoe@email.com</Table.Cell> <Table.Cell> <DropdownMenu.Root> // My Dropdown component <DropdownMenu.Trigger> <EllipsisVertical class="w-4 h-4"/> </DropdownMenu.Trigger> <DropdownMenu.Content> <DropdownMenu.Group> <DropdownMenu.Label>Action</DropdownMenu.Label> <DropdownMenu.Separator /> <DropdownMenu.Item>Edit</DropdownMenu.Item> <DropdownMenu.Item>Delete</DropdownMenu.Item> </DropdownMenu.Group> </DropdownMenu.Content> </DropdownMenu.Root> </Table.Cell> </Table.Row>

[devpapi0891]

Funny. A few minutes after making this post I remember the stopPropagation().

<Table.Cell on:click={(e) => e.stopPropagation()}>