如何将 event.preventDefault 与 KnockoutJs 单击事件处理程序一起使用？答案

【问题标题】：How do I use event.preventDefault with KnockoutJs click event handlers?如何将 event.preventDefault 与 KnockoutJs 单击事件处理程序一起使用？
【发布时间】：2012-01-08 00:00:16
【问题描述】：

我在 KnockoutJs 中有以下表格行作为脚本模板：

    <script id="inboxTemplate" type="text/html">           
    <tr data-bind="click: function() { viewInboxModel.selectAction($data); }">                                 
        <td>...</td>                 
        <td>${ CreateDate }</td>               
        <td data-bind="click: function(e){ e.preventDefault();viewInboxModel.clearAction($data); }"><img src="/Content/images/delete.png" height="16px" width="16px"> </td>
    </tr>            
    </script>

问题是当我单击删除按钮时，它也在运行 selectAction() 方法。我尝试在 selectAction 点击处理程序和 clearAction() 点击处理程序中使用 e.preventDefault() 无济于事。如果单击删除按钮，KnockoutJs 是否可以阻止现在单击基础行？

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

如果您引用了 jQuery，那么您可以在处理程序中安全地调用 e.stopImmediatePropagation();，因为它传递了 jQuery 事件对象。如果您不使用 jQuery，那么您仍然可以执行以下操作：

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

http://jsfiddle.net/rniemeyer/mCxjz/

【讨论】：

在您的 jsFiddle 中，“两次”点击处理程序没有正确阻止事件传播到我当前版本的 Chrome 中的“一次”点击处理程序。
@mkmurray 这个小提琴引用了来自 github 的最新 KO，但它是在 KO 2.0 之前创建的。在 KO 2.0 中，将数据作为第一个 arg 传递给事件处理程序并将事件第二个传递给了一个重大更改。 Fiddle 现已更新以使用正确的签名。
在 KO 2.1.0（可能还有其他版本...）中，您可以使用 clickBubble: false。例如：见：knockoutjs.com/documentation/click-binding.html

【解决方案2】：

根据@Benoit Drapeau 的评论：

在最新版本的 Knockout 中，您使用 clickBubble: false。例如

<td data-bind="click: myFunction, clickBubble: false"> </td>

http://knockoutjs.com/documentation/click-binding.html

【讨论】：