单击行中的复选框在行敲除绑定上触发事件绑定

Question

我有一个场景，其中 Click 事件绑定到 <tr> 并且选中的值绑定到 <td? 内的复选框 <tr> 。现在的问题是当单击该行时，触发事件就可以了。但是如果我单击复选框，则行的可观察值也会更改并触发行单击事件。如何避免这种情况

<tbody data-bind="foreach:Mails">
    <tr data-bind="click:$root.navigateToMail">
        <td style="width: 15px">
            <input type="checkbox" data-bind="checked: isSelected">
            @*<input type="checkbox">*@
        </td>
        <td data-bind="text: From">
        </td>
        <td data-bind="text: To">
        </td>
        <td data-bind="text: Subject">
        </td>
        <td data-bind="text: MailDate">
        </td>
    </tr>
</tbody>

事件是：

 ko.utils.arrayForEach(data.mails, function (mail) {
                    mail.isSelected = ko.observable(false);
                    mail.isSelected.subscribe(function (myvalue) {
                        console.log(myvalue);
                    });
                });
 self.navigateToMail = function (mail) {
        location.hash = mail.Folder() + '/' + mail.Id();
    };

我删除了不必要的代码。只是把问题出现在哪里。

Answer 1

您基本上需要取消点击时冒泡的事件。

这里有一个例子来说明如何做到这一点：

<div data-bind="click: parentClick">
    <input type="checkbox" data-bind="checked: isSelected, click: function(){return true}, clickBubble: false">
</div>​

请看这里：http://jsfiddle.net/2M9XP/1/