如何将Event.preventDefault与KnockoutJs单击事件处理程序一起使用?

jaf*_*ffa 24 jquery knockout.js

我在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>
Run Code Online (Sandbox Code Playgroud)

问题是当我单击删除按钮时,它还运行selectAction()方法.我尝试在selectAction单击处理程序和clearAction()单击程序处理程序中使用e.preventDefault()无效.无论如何,如果点击删除按钮,KnockoutJs是否可以阻止现在点击基础行?

RP *_*yer 28

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

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Run Code Online (Sandbox Code Playgroud)

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

  • 在KO 2.1.0(可能还有其他版本......)中,您可以使用clickBubble:false.例如:<td data-bind ="click:myFunction,clickBubble:false"> </ td>请参阅:http://knockoutjs.com/documentation/click-binding.html (10认同)
  • @mkmurray这个小提琴从github引用最新的KO,但是在KO 2.0之前创建.在KO 2.0中,将数据作为第一个arg传递给事件处理程序和事件第二个进行了重大更改.小提琴现在更新为使用正确的签名. (2认同)

Mat*_*erd 5

根据@Benoit Drapeau的评论:

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

<td data-bind="click: myFunction, clickBubble: false"> </td>
Run Code Online (Sandbox Code Playgroud)

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