只允许周围的 div 的点击事件在未点击内部标签时触发

Question

我在这里准备了一个小提琴：

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

如您所见，我试图用 div 包围复选框 + 标签，并向 div 应用点击事件，该事件仅应在未点击输入或标签时触发。我什至在这里应用了一个 fakeClick-function，它基本上什么都不做，并试图抑制冒泡，但它没有帮助。

无论我点击什么，它都会执行 divs 功能。

对于所有想在这里查看关键代码的人：

<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>

和

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

ko.applyBindings(functionWrapper);

由于缺少 CSS，在这里看不到明显，但基本上我的 div 包含一个输入和标签标签，我希望在点击时只执行输入和标签标签功能，而不是 divs 功能。

现在，输入和标签函数根本没有执行。

提前致谢！

Answer 1

根据您的小提琴，问题是关键字拼写错误。 查看小提琴here 并注意“clickBubble”而不是“clickbubble”。

另一种方法是在 fakeClick 函数内的事件上调用函数 stopPropagation：

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

你修改过的小提琴here

更多关于 stopPropagation 的信息请看here