How to prevent events from "bubbling up" when using knockout-delegatedEvents

Question

I am using Footable and Knockout and knockout-delegatedEvents. I have a delegated event working on a specific column on each row of the table. Footable has break points and will hide columns when the size of the screen shrinks to a certain point. After the screen has shrunk and the columns have been hidden, you click on the row and the data for the hidden columns will be shown.

The issue I'm having is when I click on the column I have specified the delegated event for both events happen. (The event for knockout and the event for footable.)

Is there a way to tell knockout-delegatedEvents to not bubble up events? Or is there a way to tell footable to only expand the row for a specific column? (By default footable expands for when you click anywhere on the row.)

Edit: Adding a plunk to demonstrate the issue. (http://plnkr.co/edit/0dAeDuPunftjaqEh3ijP)

Decs, Test Col 1, and Test Col 2 all have the data-click attribute and will call the selectItem function which shows a modal dialog. If the screen is shrunken to the size of a phone, Test Col 1 and 2 are hidden and an icon is shown at the first of the row. If you click on that icon or an other place on the row (except for the remove button), the row is expanded and values for Test Col 1 & 2 can be seen. The behavior I'd like to see is to have the row only expand when the icon at the front of the row is clicked.

Ideally, this would be a Footable setting, but if I can get the behavior that I want via a knockout-delegatedEvents I'd do it.

Answer 1

I've done some more testing and found that the Footable data-toggle event happens first so the solution will need to come from Footable or something before knockout is involved.

I have created a new question that is specific to Footable. (Specify what column triggers data-toggle event)