避免带有敲除的双击事件（按钮+行）

Question

我有以下敲除html代码：

<table class="vehicles" data-bind="with: chosenCategoryData">
    <tbody data-bind="foreach: Vehicles">
        <tr data-bind="click: $root.goToVehicle">
            <td data-bind="text: Brand"></td>
            <td data-bind="text: Model"></td>
            <td data-bind="text: Registration"></td>
            <td><button data-bind="click: $root.deleteVehicle">Delete</button></td>
        </tr>     
    </tbody>
</table>

单击任意行，将导航到详细信息页面。

单击删除按钮将删除该行上的元素。

此删除按钮位于最后一列。

问题是，当我点击删除按钮时，会触发名为 deleteVehicle 的淘汰赛事件（ok），但也会触发 goToVehicle 事件（nok）。

点击删除按钮时如何避免该行的点击事件？

谢谢。

---

更新

这是在 deleteVehicle 后面调用的事件：

self.deleteVehicle = function (vehicle)
{
    $.ajax({ url: "/api/vehicle?id=" + vehicle.VehicleId, type: "DELETE" });
    location.hash = vehicle.Category;
}

如您所见，首先我调用 ajax 来删除元素。接下来我强制重新加载我的网格。如果我使用 clickBubble 事件处理程序，它会在我的 deleteVehicle 函数中执行我的 ajax 调用，但不会执行 location.hash = vehicle.Category;。所以我的网格没有刷新？？？

Answer 1

您可以在按钮上使用clickBubble 绑定。它将防止事件冒泡到 tr:

<table class="vehicles" data-bind="with: chosenCategoryData">
    <tbody data-bind="foreach: Vehicles">
        <tr data-bind="click: $root.goToVehicle">
            <td data-bind="text: Brand"></td>
            <td data-bind="text: Model"></td>
            <td data-bind="text: Registration"></td>
            <td><button data-bind="click: $root.deleteVehicle, clickBubble: false">Delete</button></td>
        </tr>     
    </tbody>
</table>

Answer 2

你的代码应该可以工作。我不知道它为什么不工作。也许你可以摆弄一下，以便我们找出问题所在。

这也可以按您的预期工作：

为表格行和按钮添加 id

eg;)  <tr id ="tableRow" data-bind="click: $root.goToVehicle">
        <td data-bind="text: Brand"></td>
        <td data-bind="text: Model"></td>
        <td data-bind="text: Registration"></td>
        <td><button id="deleteBtn" data-bind="click: $root.deleteVehicle">Delete</button></td>
      </tr>      

如下更改您的 goToVehicle 方法：-

self.goToVehicle = function(data,event){
 if ( !$(event.target).is('deleteBtn') ) {  
    alert('clicked');  
    //some code here
 }  
});