angularjs – 什么是最好的方法来取消嵌套ng单击调用之间的事件

发布时间：2020-12-17 09:22:18 所属栏目：安全来源：网络整理

导读：这里有一个例子。假设我想要一个图像叠加像很多网站。因此，当您点击缩略图时，整个窗口上会显示一个黑色叠加层，而图片的较大版本位于其中央。点击黑色覆盖层会将其忽略;单击图像将调用显示下一个图像的函数。 html： div ng-controller="OverlayCtrl" clas

这里有一个例子。假设我想要一个图像叠加像很多网站。因此，当您点击缩略图时，整个窗口上会显示一个黑色叠加层，而图片的较大版本位于其中央。点击黑色覆盖层会将其忽略;单击图像将调用显示下一个图像的函数。

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()函数像这样：

if (window.event) {
    window.event.stopPropagation();
}

…但我想知道是否有一个更好的AngularJS的方式，这将不需要我用这个代码片段覆盖所有的覆盖内的元素的功能。

什么@JosephSilber说，或传递$事件对象到ng单击回调和停止传播它：

<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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!