仅当未点击内部标签时才允许周围div的click事件触发

Question

I've prepared a fiddle here:

https://jsfiddle.net/9m4bgyq8/16/

As you can see, I am trying to surround a checkbox + label with a div, and apply a click-event to the div, which is only supposed to trigger when the input or label are NOT being clicked. I even applied a fakeClick-function here, which basically does nothing, and tried to suppress bubbling, however it doesn't help.

It's executing the divs function no matter what I click.

For everyone who wants to see crucial code here:

<ul>
  <div data-bind="click: clickFunction">
    <input id="muteCheckBox" type="checkbox" data-bind="click: fakeClick, clickbubble: false"/>
    <label for="muteCheckBox" data-bind="click: fakeClick, clickbubble: false">I'm a label</label>
  </div>
</ul>

and

var functionWrapper= {
    clickFunction : function(data, event) {
        window.alert("Event triggered");
    },
    fakeClick : function(data,event) {
        //Do nothing
    }
};

ko.applyBindings(functionWrapper);

It's not obvious to see here due to CSS being missing, but basically my div contains an input and label tag, and I want only the inputs and labels tag function to execute when a click is placed there, not the divs function.

Right now, the inputs and labels function are not executed at all.

Thanks in advance!

Answer 1

According to your fiddle the problem is a mispelled keyword. Look at the fiddle here and notice the "clickBubble" instead of the "clickbubble".

Another way to do that could also be calling the function stopPropagation on the event inside the fakeClick function:

fakeClick : function(data,event)
{
    event.stopPropagation();
}

Your modified fiddle here

For more info about the stopPropagation look here