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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With