取消嵌套 ng-click 调用之间的事件传播的最佳方法是什么?

<img src="http://some_src" ng-click="nextImage($event)"/>$scope.nextImage = function($event) {$event.stopPropagation();//一些代码来查找和显示下一张图片}Here's an example. Let's say I want to have an image overlay like a lot of sites. So when you click a thumbnail, a black overlay appears over your whole window, and a larger version of the image is centered in it. Clicking the black overlay dismisses it; clicking the image will call a function that shows the next image.The html:<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()"> <img src="http://some_src" ng-click="nextImage()"/></div>The javascript:function OverlayCtrl($scope) { $scope.hideOverlay = function() { // Some code to hdie the overlay } $scope.nextImage = function() { // Some code to find and display the next image }}The problem is that with this setup, if you click the image, both nextImage() and hideOverlay() are called. But what I want is for only nextImage() to be called.I know you can capture and cancel the event in the nextImage() function like this:if (window.event) { window.event.stopPropagation();}...But I want to know if there's a better AngularJS way of doing it that won't require me to prefix all of the functions on elements inside the overlay with this snippet. 解决方案 What @JosephSilber said, or pass the $event object into ng-click callback and stop the propagation inside of it:<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()"> <img src="http://some_src" ng-click="nextImage($event)"/></div>$scope.nextImage = function($event) { $event.stopPropagation(); // Some code to find and display the next image} 这篇关于取消嵌套 ng-click 调用之间的事件传播的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！