Javascript AngularJS ng单击停止播放

我在表行上有一个单击事件，在这一行中还有一个带有单击事件的删除按钮。当我单击delete按钮时，行上的click事件也会被触发

这是我的密码

{{user.firstname}
{{user.lastname}
{{user.email}
删除

如何防止在单击表格单元格中的删除按钮时触发

showUser

事件？

ngClick指令（以及所有其他事件指令）创建在同一范围内可用的

$Event

变量。此变量是对JS

事件

对象的引用，可用于调用

stopPropagation（）

：

{{user.firstname}
{{user.lastname}
删除

---

对斯图薇答案的补充。如果回调决定是否停止传播，我发现将

$event

对象传递给回调非常有用：

然后在回调本身中，您可以决定是否应停止事件的传播：

$scope.childHandler=函数（$event）{
如果（想停止它（））{
$event.stopPropagation（）；
}
...
};


{{location.displayName}
$scope.onLocationSelectionClicked=函数（$event）{
如果（$scope.limitSelectionCountTo&&$scope.SelectedActions.locations.length==$scope.limitSelectionCountTo）{
$event.currentTarget.checked=false；
}
};


我写了一个指令，允许您限制点击产生影响的区域。它可以用于像这样的特定场景，所以不必逐个处理点击，您只需说“点击不会来自此元素”

您可以这样使用它：

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

如果您使用的是像我这样的指令，则当您需要双向数据绑定（例如在更新任何模型或集合中的属性后）时，它就是这样工作的：

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

现在，您可以轻松地在任何按钮、链接、div等中使用它，如下所示：

<button set-survey-in-edition-mode >Edit survey</button>

编辑调查
我无法确定控制器代码中是否有此选项-$scope.$event似乎不起作用。有什么想法吗？@event对象是在ng-click指令中创建的，您可以将它传递给
ng-click
处理函数：
ng-click=“deleteUser（user.id，$event）”
。谢谢，有点像这样，但我认为它仍然很臭：）我认为执行这样的多个表达式是一种反模式。为什么不将$event作为第三个参数传递给deleteUser（），然后在该函数中传递stopPropagation（）？我还必须添加
$event.preventDefault（）
，否则调用
$event.stopPropagation（）
在单击按钮时将我重定向到我的应用程序的根目录。这比在html属性中执行多个表达式更优雅，感谢您在html ng click指令中添加“$event”参数。一开始我无意中发现了这一点。为了立即停止，最好使用$event.stopImmediatePropagation（），它非常简单，但却被忽略了。我看着选择的答案，想“真的吗？这很难看吗？”。甚至没有意识到将其作为参数传递。真的很好。你能解释一下为什么你认为这回答了这个问题吗？它回答了这个问题。它展示了如何将事件传递到回调，这比最初的问题更复杂。很好！我已将您的指令重命名为
ngClick
，因为我实际上不想传播已处理的事件。请小心。其他一些插件可能真的想要监听这些点击。如果您使用在单击外部时关闭的工具提示，它们可能永远不会关闭，因为外部单击不会传播到主体。这是一个很好的观点，但此问题也会发生在您的指令中。也许我应该在事件中添加一个属性，比如
ignoreNgClick=true
，然后处理它。。。以某种方式理想情况下，在原始的
ngClick
指令中，修改它听起来很脏。是的，这就是为什么我不会使用这个指令，除非我真的需要它。有一次，由于这个原因，我甚至不得不发出另一个指令来继续点击传播。所以我有一个孤立的点击指令，然后我有另一个继续点击指令。这样，只跳过中间元素的单击。
angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

<button set-survey-in-edition-mode >Edit survey</button>