Question

我可能只是想到这个错误，因为我在Angular中做了这个并且过于复杂，但是我想要做的就是设置我的click事件，这样它只在单击一个元素时触发，但不是它的孩子。我试图设置一个模态，如果你单击它关闭的背景叠加，但显然我不希望它在用户与模态交互时关闭。

<div class="overlay">
    <div class="modal">
    </div>
</div>

到目前为止，我已创建了这个：

@HostListener('document:click', ['$event.target']) public onClick(targetElement: HTMLElement) {
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside && targetElement.class.indexOf('overlay') && targetElement.parentElement.tagName === 'GP-MODAL') {
        //do stuff
    }
}

其中_elementRef是Angular ElementRef。问题是感觉这是一种效率低下的方式：触发任何点击，只对某些元素继续。触发点击.overlay然后以某种方式在.wrapper中没有取消它感觉更理想，但我无法想到如何做到这一点。有什么建议吗？

Answer 1

我认为你要找的是 stopPropagation 方法，它位于事件对象中

＆＃13;

(function () {
  var app = angular.module('app', []);
  app.controller('MainCtrl', MainController);
  
  MainController.$inject = [];
  
  function MainController () {
    var vm = this;
    vm.onClick = function (event) {
      event.stopPropagation();
      alert('Child clicked');
    };
    
    vm.parentOnClick = function (event) {
      alert('Parent clicked');
    };    
  }
  
}) ();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<body ng-app="app" ng-controller="MainCtrl as vm">
  <div ng-click="vm.parentOnClick($event)" style="height: 400px; width: 400px; background: red;">
    <div ng-click="vm.onClick($event)" style="position: absolute; top: 100px; left: 100px; background: blue; height: 200px; width: 200px;">
    </div>
  </div>
</body>

＆＃13;

Answer 2

我提出了两种可能的方法，具体取决于选择标准。

第一个只是Javascript：如果您知道可以检查的被点击元素的特定属性，请在要跟踪的元素上创建一个click事件，绑定到：

clickedOverlay(event) {
    if (event.target.parentElement.tagName === 'GP-MODAL') {
        // Do stuff
    }
}

一个更有针对性的回答：

@ViewChild('targetEle') targetEle: HTMLElement;

clickedOverlay(event: MouseEvent) {
    if (this.targetEle === event.target) {
        // Do stuff
    }
}

它更明确，更不容易出现误报，但更冗长。

不建议这些是最好的答案，但我现在的偏好。

单击元素的子元素时忽略单击事件

2 个答案: