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

checkbox click ignored if parent has onclick bind

本文关键字：单击 复选框 绑定 onclick 如果      更新时间：2023-09-26

如果父"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。

我用调试器跟踪了代码，注意到点击实际上并没有被忽略，而是发生了一长串事件，其中最后一个事件是恢复复选框的值（从而使点击无效）。

为了使用调试器遵循这个链，我在复选框上绑定了一个点击事件。

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

请随意打开您的开发工具，看看在startDebug函数中是如何实现预期行为的（但后来又恢复到错误的）。调试程序调用：在这里。

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

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

演示JSFiddle。

另请参阅文档中的：允许默认点击操作（可能是下一个注意事项防止事件冒泡也相关）

相关文章：