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

17 浏览
0 Comments

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

这是一个例子。假设我想要像许多网站一样有一个图像叠加效果。所以当你点击缩略图时，整个窗口上会出现一个黑色叠加层，并且图像的较大版本会在其中居中显示。点击黑色叠加层会使其消失；点击图像将调用一个函数来显示下一个图像。\nHTML代码：\n

\nJavaScript代码：\n

function OverlayCtrl($scope) {
    $scope.hideOverlay = function() {
        // 隐藏叠加层的代码
    }
    $scope.nextImage = function() {
        // 查找并显示下一个图像的代码
    }
}

\n问题是，使用这种设置，如果你点击图像，会同时调用`nextImage()`和`hideOverlay()`。但是我希望只调用`nextImage()`。\n我知道你可以在`nextImage()`函数中捕获并取消事件，像这样：\n

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

\n...但我想知道是否有更好的AngularJS的方法来做到这一点，而不需要在叠加层内部的所有元素的函数前加上这段代码。

0

3 答案

0 Comments

问题出现的原因：ng-click嵌套时，想要取消事件传播，但是ng-click的执行在指令之前，所以无法通过指令来阻止ng-click的执行。

解决方法：可以使用一个自定义指令来取消事件传播。首先创建一个名为"stopEvent"的指令，通过在其中绑定click事件并调用stopPropagation()方法来取消事件传播。然后在需要取消事件传播的元素上使用该指令。如果元素是动态添加/移除的，还需要监听"$destroy"事件来解绑事件处理器。

以下是具体的解决方案代码示例：

.directive('stopEvent', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            element.bind('click', function(e) {
                e.stopPropagation();
            });
        }
    };
});

使用该指令的示例：

需要注意的是，"stop-event"是一个自定义的HTML属性，不在Mozilla Developer Network或其他地方找得到相关文档。

如果需要更通用的解决方案，可以参考这个回答。另外，如果元素是动态添加/移除的，需要监听"$destroy"事件来解绑事件处理器。

希望以上解决方案对您有所帮助！

0
0 Comments

问题原因：在嵌套的ng-click调用之间取消事件传播的最佳方法是使用$event.stopPropagation()。在示例代码中，当在第一个ng-click中调用$event.stopPropagation()时，控制台会出现ReferenceError: $event is not defined的错误。

解决方法：确保在正确的位置调用$event.stopPropagation()，并删除任何重复或多余的调用。此外，确保使用的是最新版本的Angular。

0
0 Comments

问题的出现的原因是在嵌套的`ng-click`调用中，希望取消事件传播。解决方法是通过在`ng-click`回调函数中传递`$event`对象并在其中停止传播。

具体的解决方法如下：

首先，在HTML代码中添加一个父级元素的`ng-click`事件，并在其中调用一个隐藏覆盖层的函数。在子元素中添加另一个`ng-click`事件，并将`$event`对象传递到`nextImage`回调函数中。

然后，通过在`nextImage`函数中调用`$event.stopPropagation()`来停止事件传播。这样可以阻止点击事件传播到父级元素。

$scope.nextImage = function($event) {
  $event.stopPropagation();
  // Some code to find and display the next image
}

如果使用的是Angular版本大于1.5，则可以使用`$event.preventDefault()`来阻止默认行为。

另外，有人表示在Angular 1.5.8中仍然可以正常使用`$event.stopPropagation()`，但是`$event.preventDefault()`不起作用。还有人表示相反的情况，即`stopPropagation`不再起作用，但是`preventDefault`可以正常使用。不同之处在于直接在`ng-click`上调用。例如：

.....

总结起来，解决这个问题的最佳方法是在嵌套的`ng-click`调用中使用`$event.stopPropagation()`来停止事件传播，并在需要的情况下使用`$event.preventDefault()`来阻止默认行为。

0