单击div外部 - 当div具有触发事件的按钮时 - angularjs [英] Click outside div - when div has buttons that fires events - angularjs

问题描述

我正在使用以下指令来检测何时在div之外进行点击：

I'm using the following directive to detect when a click is made outside a div:

app.directive('clickOut', function ($window, $parse) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var clickOutHandler = $parse(attrs.clickOut);

        angular.element($window).on('click', function (event) {
            if (element[0].contains(event.target)) return;
            clickOutHandler(scope, {$event: event});
            scope.$apply();
        });
    }
  };
});

在此div中：

             <div class="panel-body" click-out="closeMyPopup()">                 
                <div class="row clearfix">
                    <div class="col-md-12">
                        <div class="form-inline pull-right">
                            <button type="button" class="form-control btn"  ng-click="onCancelAnnouncement()">Cancel</button>
                            <button type="submit" class="form-control btn" ng-click="onSaveAnnouncement()">Save</button>
                        </div>

                    </div>
                </div>

            </div>

它运行良好，当您在div外部点击时，函数closeMyPopup（）被触发，问题是div具有触发其他功能的按钮。由于某种原因，当调用其他函数时（如单击按钮时）会触发事件单击外部调用closeMyPopup（），按钮位于div内部，因此不应调用外部事件单击。我可以使用另一个指令，它具有正确的行为，并且在您触发另一个函数时不会触发外部的单击？或者我该如何解决这个问题？

It works well, when you click outside the div, the function closeMyPopup() is triggered, the issue is that the div has buttons that triggers other functions. By some reason when other function is called, (like when the buttons are clicked) the event click outside is triggered calling the closeMyPopup(), the buttons are inside the div so the event click outside should not be called. There's another directive that I can use, that has the correct behavior and not trigger the click outside when you fire another function? Or how can I workaround this?

我也使用这个其他指令，问题相同：

I also use this other directive, with the same issue:

app.directive("outsideClick", ['$document', '$parse', function      ($document, $parse) {
    return {
           link: function ($scope, $element, $attributes) {
        var scopeExpression = $attributes.outsideClick,
            onDocumentClick = function (event) {
                var isChild = $element.find(event.target).length > 0;

                if (!isChild) {
                    $scope.$apply(scopeExpression);
                }
            };

        $document.on("click", onDocumentClick);

        $element.on('$destroy', function () {
            $document.off("click", onDocumentClick);
        });
    }
  }
}]);

推荐答案

因为事件正在传播到 Window object。

Its because the event is being propagated to Window object.

- Window
    - document
        - dialog
           - button

在上面的层次结构中，如果最后一次发生点击事件按钮元素，该事件将传播到父元素，直到它到达Window，然后关闭对话框。

In the above hierarchy, if a click event happens on the last button element, the event will be propagated to the parent element until it reaches Window and then will close your dialog.

解决方案1：

通过将事件作为参数传递并调用 event.stopPropagation来停止每个控制器函数中的事件传播（）功能：

Stop event propagation in each controller function by passing the event as a parameter and calling event.stopPropagation() function:

<button type="button" class="form-control btn"  ng-click="onCancelAnnouncement($event)">Cancel</button>

...

$scope.onCancelAnnouncement($event) {
    $event.stopPropagation();
}

解决方案2：

让事件传播并检查目标元素：

Let the event be propagated and check the target element:

angular.element($window).on('click', function (event) {
        var target = $(event.target);
        if(target.attr("id") === "anyid") { // or target.hasClass("someclass")
                                            // or target.closest(".some-selector")
            // just ignore
        } else {
            // Do whatever you need 
        }
});

这篇关于单击div外部 - 当div具有触发事件的按钮时 - angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！