javascript - Knockout.js 3 中的 PreventDefault() `click`

Question

我在 Knockout.js 中有一个 data-bind="click: ..." 事件，并且每当存在 disabled 类时我都会尝试禁用它在元素中。

<span class="disabled" data-bind="click: alerting">Two</span>

我正在尝试这个但没有成功:

$('.disabled').click(function(e){
    e.preventDefault();
});

Reproduction online

我更喜欢使用类名来完成此操作，因为这样我可以处理元素的样式以及站点中多个元素与其的交互。

Answer 1

这里的问题是无法保证哪个点击处理程序将首先运行。在本例中， knockout 点击绑定(bind)在 jquery 处理程序之前执行。

考虑到您正在使用 knockout ，执行此操作的“正确”方法是让 View 模型处理所有内容，而不是依赖外部事物(例如 jQuery)来防止点击发生。

在您的情况下， View 模型可能如下所示:

var viewModel = {
    disabled: ko.observable(false),
    alerting: function(data, e) {
       if (!this.disabled())
           alert("two");
    }
};

然后，您只需更新 disabled observable 即可启用/禁用点击处理程序。您还可以利用此可观察量对应禁用的元素应用不同的样式，例如添加禁用的样式，而不是使用样式来控制 knockout 行为。