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

问题描述

我使用以下指令来检测何时在 div 外进行了点击:

app.directive('clickOut', function ($window, $parse) {返回 {限制:'A'，链接:函数(范围、元素、属性){var clickOutHandler = $parse(attrs.clickOut);angular.element($window).on('click', function (event) {if (element[0].contains(event.target)) 返回；clickOutHandler(scope, {$event: event});范围.$应用()；});}};});

在这个 div 中:

 
<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()">取消</button><button type="submit" class="form-control btn" ng-click="onSaveAnnouncement()">保存</button>

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

我也使用这个其他指令，但有同样的问题:

app.directive("outsideClick", ['$document', '$parse', function ($document, $parse) {返回 {链接:函数($scope，$element，$attributes){var scopeExpression = $attributes.outsideClick,onDocumentClick = 函数(事件){var isChild = $element.find(event.target).length >0;如果(！isChild){$scope.$apply(scopeExpression);}};$document.on("click", onDocumentClick);$element.on('$destroy', function () {$document.off("click", onDocumentClick);});}}}]);

解决方案

这是因为事件正在传播到 Window 对象.

- 窗口- 文档- 对话- 按钮

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

解决方案 1:

通过将事件作为参数传递并调用event.stopPropagation()函数来停止每个控制器函数中的事件传播:

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

...

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

解决方案 2:

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

angular.element($window).on('click', function (event) {var target = $(event.target);if(target.attr("id") === "anyid") {//或 target.hasClass("someclass")//或 target.closest(".some-selector")//直接无视(好了} 别的 {//做任何你需要的}});

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();
        });
    }
  };
});

In this 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>

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);
        });
    }
  }
}]);

解决方案

Its because the event is being propagated to Window object.

- Window
    - document
        - dialog
           - button

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.

Solution 1:

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();
}

Solution 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屋！