如果父項具有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操作 （可能與下一個注意事項有關： 防止事件冒泡也很重要）