0

淘汰赛我有以下几点：

<!-- ko foreach: data.folders -->
    <div class="study-box">
        <input class="study-box-checkbox" type="checkbox" />
    </div>
<!-- /ko -->

这给了我一个带有复选框的 div 列表。我已将以下事件处理程序注册到学习框：

var bindEventToList = function (rootSelector, selector, callback, eventName) {
        var eName = eventName || 'click';
        $(rootSelector).on(eName, selector, function () {
            var folder = ko.dataFor(this);
            callback(folder);
            return false;
        });
    };

bindEventToList(view, '.study-box', gotoDetails);

因此，当单击学习框时，会触发 goToDetails。

这样做的问题是，即使单击了包含复选框，也会触发事件。我不希望这种情况发生。复选框有自己的绑定：

<input class="study-box-checkbox" type="checkbox" data-bind="visible: checkboxIsVisible(), attr: { value: setId() }, attrIf: { id: 'study-box-checkbox-soft', _if: (softCheckboxIsVisible() && isSelected() == false) }, checked: isSelected" />

我认为一个选项是将复选框放置在 div 之外，但随后将复选框放置在每个 div 的顶部，这似乎远非微不足道。

如何解决这个问题？

JSFiddle：http: //jsfiddle.net/PTSkR/79/

4

1 回答 1

0

当需要与checked元素上的绑定相结合时，我过去曾使用过这样的自定义绑定：

ko.bindingHandlers.stopPropagation = {
    init: function(element) {
        ko.utils.registerEventHandler(element, "click", function(e) {
            e.cancelBubble = true;
            if (e.stopPropagation) {
                e.stopPropagation();
            }
        });
    }
};

示例：http: //jsfiddle.net/rniemeyer/2yYMY/

如果您将它与普通click绑定一起使用，那么您也可以clickBubble: false在绑定中指定。

于 2013-05-27T18:46:48.993 回答