gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 04:14:12 25 4
gpt4 key购买 nike

这是一个例子。假设我想要像很多网站一样有一个图像叠加层。因此,当您单击缩略图时,整个窗口上会出现黑色覆盖层,并且图像的较大版本位于其中的中心。单击黑色覆盖层可将其关闭;单击图像将调用显示下一张图像的函数。

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 所说的,或者将 $event 对象传递给 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
}

关于angularjs - 取消嵌套 ng-click 调用之间的事件传播的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15193539/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com