这是一个例子。假设我想要像很多网站一样叠加图像。因此,当您单击缩略图时,整个窗口上会出现一个黑色叠加层,并且较大版本的图像会在其中居中。单击黑色叠加层将其关闭;单击图像将调用显示下一张图像的函数。
的HTML:
<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()"> <img src="http://some_src" ng-click="nextImage()"/> </div>
的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 } }
问题在于,使用此设置,如果您单击图像,nextImage()则会hideOverlay()调用 和 。但我想要的只是nextImage()被调用。
nextImage()
hideOverlay()
nextImage()我知道您可以像这样在函数中捕获和取消事件:
if (window.event) { window.event.stopPropagation(); }
…但是我想知道是否有更好的 AngularJS 方法来做这件事,它不需要我在覆盖层内的元素上的所有函数前面加上这个片段。
@JosephSilber 说了什么,或者将 $event 对象传递给ng-click回调并停止其中的传播:
ng-click
<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 }