如果父项具有onclick绑定，则复选框单击忽略

Question

如果父级“ onclick”事件绑定到函数，则忽略复选框的单击。 我不希望这种情况发生：我该怎么办？ 我已经精简了代码以说明问题。

HTML：

<div class="container" data-bind="click: someFunction">
   Click me: <input type="checkbox" data-bind="checked: selected" />
</div>

JS：

function vm() {
    this.selected = ko.observable(true);
    this.someFunction = function(){};
}
ko.applyBindings(new vm());

小提琴： 在这里 。 尝试单击该复选框：似乎什么也没发生（不正确：我将在稍后解释）。

删除对容器div的someFunction的调用会导致预期的行为。 参见示例： 此处 。 显然，这并不能解决问题，因为我也需要someFunction 。

---

我在代码中调试器之后，注意到实际上并未忽略单击，而是发生了一连串的事件，最后一个事件是还原复选框的值（因此使单击无效）。

为了使用调试器遵循此链，我在复选框上绑定了click事件。

<div class="container">
    Click me: <input type="checkbox" data-bind="click: startDebug, checked: selected" />
</div>

随意打开您的开发工具，看看当我们处于startDebug函数中时，如何实现预期的行为（但稍后会恢复为错误的状态）。 调试器调用的小提琴： 这里 。

Answer 1

您只需要从click处理程序返回true即可触发浏览器的默认点击操作：

function vm() {
    this.selected = ko.observable(true);
    this.someFunction = function(){ return true; };
}

演示JSFiddle 。

另请参见文档中的内容： 允许默认的click操作 （可能与下一个注意事项有关： 防止事件冒泡也很重要）