I've seen similar questions asked but I couldn't make it work for me with Knockout 'data-bind'

I have a parent div with some multiple divs inside. On the parent div I have a click event, that I do not want to fire on a specific child div that has some other event handling.

I have something like this:

<div class='parent' dataBind='click: parentClicked'>
  <div class='child' dataBind='click: childClicked'></div>
  ....some other stuff...
</div>

In my view model I tried:

function parentClicked() {
  alert('parent clicked');
}
function childClicked(event) {
  alert('child clicked');
  event.stopPropagation();
}

I get that 'event.stopPropagation()' is not a function.
What am I doing wrong?

I've seen similar questions asked but I couldn't make it work for me with Knockout 'data-bind'

I have a parent div with some multiple divs inside. On the parent div I have a click event, that I do not want to fire on a specific child div that has some other event handling.

I have something like this:

<div class='parent' dataBind='click: parentClicked'>
  <div class='child' dataBind='click: childClicked'></div>
  ....some other stuff...
</div>

In my view model I tried:

function parentClicked() {
  alert('parent clicked');
}
function childClicked(event) {
  alert('child clicked');
  event.stopPropagation();
}

I get that 'event.stopPropagation()' is not a function.
What am I doing wrong?

• javascript
• knockout.js
• event-handling

1 Answer 1

You have to use clickBubble: false. For reference: Preventing the event from bubbling

<div class='parent' dataBind='click: parentClicked'>
  <div class='child' dataBind='click: childClicked, clickBubble: false'></div>
  ....some other stuff...
</div>