Knockoutjs - Table Row Click Binding, want to exclude columns from the Click event

Question

I am trying to use knockout to bind a click to a row in a table as follows:

<tr data-bind="click: $root.selectItem"> 

It works great. The problem is that I am trying to exclude certain columns from the click action. I have edit and delete buttons on my line and I don’t want them to fire the clickItem click event. Should I just bind all the td that I want to lead this way to the click event, or is there an easier way to do this?

Spell here: http://jsfiddle.net/blankasaurus/WYKEM/

Answer 1

Update: you avoid custom binding by adding clickBubble: false as an additional snap with click binding, as suggested by Kevin Obi and demonstrated in this example: http://jsfiddle.net/kevinobee/Q25ja/2/

Original: you can use a custom binding that binds the click binding and prevents additional events from occurring. It might look like this:

 ko.bindingHandlers.clickAndStop = { init: function(element, valueAccessor, allBindingsAccessor, viewModel, context) { var handler = ko.utils.unwrapObservable(valueAccessor()), newValueAccessor = function() { return function(data, event) { handler.call(viewModel, data, event); event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); }; }; ko.bindingHandlers.click.init(element, newValueAccessor, allBindingsAccessor, viewModel, context); } }; 

Here is an example: http://jsfiddle.net/rniemeyer/xj7Hs/