Question

假设我有一行看起来像

<tr>
  <td>John</td>
  <td>Smith</td>
  <td>Approved?<input type="checkbox"/></td>
</tr>

每行显示一名员工，并允许您检查批准/拒绝该员工（例如，注册课程）。我希望用户能够点击该行的任何位置以获得有关该员工的更多详细信息，但如果他们点击最后一列（“已批准？”），则不应该更详细，因为它应该只是更改复选框

以下是我所知道的解决方案，没有一个是伟大的：

整行：<tr class="clickable" ng-click="go()">。使所有单元格和边距可单击，只需要一个ng-click条目，但复选框会导致“go（）”执行，这很糟糕。
每个单元格：<td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()">。 Pro：可以限制我想要的细胞。骗局：大量重复（不是干），并且错过了边缘。
整行有特殊的“go”fn：<tr class="clickable" ng-click="go()">，但“go”知道如何区分不同的单元格。亲：确切有效果。 Con：在专门的控制器操作中需要大量的视图/ html知识。

如何才能使前2列及其边距可点击，而不是第3列或其边距？

Answer 1

您可以使用两个点击处理程序，一个用于整个tr，第二个用于最后一个td'复选框。在第二次使用Event的{{3}}方法。

控制器：

var TableCtrl = function($scope){
    $scope.click1 = function(){
        console.log("Click 1 method")
    }
    $scope.click2 = function(e){
        console.log("Click 2 method");
        e.stopPropagation();
    }
}

标记：

<table ng-controller="TableCtrl">
<tr ng-click="click1()">
  <td>John</td>  <td>Smith</td>
  <td>Approved?<input type="checkbox" ng-click="click2($event)"/></td>
</tr>
</table>

工作示例：stopPropagation

Answer 2

这个怎么样？

<tr>
  <td style="cursor: pointer;" ng-click="alert('hello1')">John</td>
  <td style="cursor: pointer;" ng-click="alert('hello2')">Smith</td>
  <td>Approved?<input type="checkbox"/></td>
</tr>

除了一个单元格及其边缘有角度外，如何使整行可单击？

2 个答案: