html 使行中除一列外的所有列都可单击

nwsw7zdq  于 2023-06-20  发布在  其他
关注(0)|答案(1)|浏览(96)

我正在使用AngularJS,并且在表格行中我希望整行都是可点击的,但我在最后一列中也有一个可点击的链接。就像这样:

<tr x-ng-click="goSomehere()">
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>
        <a href="" x-ng-click="openEditor()">
            edit
        </a>
    </td>
</tr>

现在我真的希望不必在所有TD元素中重复x-ng-click=“goSomewhere()”(因为它超过30个),但我还希望最后一列中的链接可以打开编辑器。有没有一种简单的方法可以从TR元素中给出的x-ng-click属性中排除最后一列?

vnzz0bqm

vnzz0bqm1#

是的,有一种方法可以实现这一点,而无需在每个元素中重复x-ng-click指令。你可以在AngularJS中使用事件委托来处理整个行上的click事件,然后根据被点击的元素有条件地执行不同的操作。
下面是一个如何实现它的示例:
1.向<tr>元素添加单击事件处理程序:
1.在控制器或指令中,定义handleRowClick函数:javascript
handleRowClick函数中,我们检查单击的元素是否是<a>标记。如果是,我们不执行行单击操作(goSomewhere())。相反,我们让openEditor()函数处理链接单击操作。我们还在openEditor函数中使用event.stopPropagation()来防止行单击事件冒泡并触发行单击操作。
使用这种方法,您只需要在<tr>元素上定义一次click事件,它将处理行内的行单击和链接单击。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.handleRowClick = function(event) {
    var target = event.target;
    var isLinkClicked = target.tagName.toLowerCase() === 'a';

    if (!isLinkClicked) {
      $scope.goSomewhere();
    }
  };

  $scope.goSomewhere = function() {
    alert('Row clicked');
  };

  $scope.openEditor = function(event) {
    event.stopPropagation();
    alert('Edit link clicked');
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table>
  <tr ng-app="myApp" ng-controller="myCtrl" ng-click="handleRowClick($event)">
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td><a href="" ng-click="openEditor($event)">edit</a></td>
  </tr>
</table>

相关问题