如何在KnockoutJS的click事件处理程序中使用event.preventDefault？

Question

我在 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可以防止如果删除按钮被单击，则底层行现在被单击？

- jaffa

Answer 1

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

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

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

- RP Niemeyer

---

在你的 jsFiddle 中，“two”的点击处理程序未能正确地阻止事件传播到我当前版本的Chrome中的“one”点击处理程序。 - mkmurray

@mkmurray 这个 fiddle 引用了来自 github 的最新 KO，但是在 KO 2.0 之前创建的。在 KO 2.0 中，有一个破坏性的更改，将数据作为事件处理程序的第一个参数传递，事件作为第二个参数传递。现在已更新 Fiddle，以使用正确的签名。 - RP Niemeyer

在KO 2.1.0版本（以及可能其他版本中），你可以使用clickBubble: false。例如：<td data-bind="click: myFunction, clickBubble: false"> </td>。请参见：http://knockoutjs.com/documentation/click-binding.html。 - Benoit Drapeau

Answer 2

根据 @Benoit Drapeau 的评论:

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

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

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

- Matt Shepherd