AngularJS实现表格行整行可点击但排除最后一列

直接通过阻止事件冒泡就能解决问题，无需给每列重复绑定点击事件，具体修改如下：

在最后一列的<a>标签的x-ng-click中添加$event.stopPropagation()，阻止事件向上冒泡到<tr>元素，这样点击编辑链接时只会触发openEditor()，不会触发行上的goSomehere()。同时将<a>的href设为javascript:void(0)，避免默认跳转行为。

修改后的完整代码：

<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="javascript:void(0)" x-ng-click="openEditor(); $event.stopPropagation()">
            edit
        </a>
    </td>
</tr>

原理说明 #

• $event是AngularJS内置的当前事件对象，调用stopPropagation()方法会终止事件向父元素传播，从而避免触发<tr>上绑定的点击事件。
• 保持<tr>上的x-ng-click="goSomehere()"不变，无需给30多列的每个<td>重复绑定事件，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者EasterBunnyBugSmasher