当点击元素的子元素时忽略点击事件

我可能只是想着这个错误，因为我在Angular中做这个并且过于复杂，但是我想要做的是设置我的点击事件，所以它只会在触发时触发一个元素被点击，但不是它的孩子。我试图设置一个模式，如果你点击背景覆盖它关闭，但显然我不希望它关闭，如果用户与模态交互。当点击元素的子元素时忽略点击事件

<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是角ElementRef。问题在于它是一种低效率的方式：触发任何点击，只能继续某些元素。感觉触发.overlay的点击，然后以某种方式没有在.wrapper中关闭的感觉更理想，但我想不出如何去做。有什么建议？

来源

2017-10-20 RhoVisions

我没有，也没有使用角度，但也许这个职位可以帮助你？ [**如何忽略点击儿童时的点击事件**]（https://stackoverflow.com/questions/3864102/how-to-ignore-click-event-when-clicked-on-children）所以也许第二函数或添加'stopPropagation（）;'将工作？因为我没有使用Angular，所以只是在黑暗中拍摄而已。 – NewToJS

我想你正在寻找的是stopPropagation方法，它驻留在事件对象

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

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

来源

2017-10-20 03:28:13

我认为'stopPropogation'，但不能完全想到如何去做。我想我可以创建一个点击孩子并停止传播它。 – RhoVisions

@RhoVisions这应该工作，所以我想我的建议将是正确的道路？我所要问的原因是因为我打算很快就开始使用Angular，所以记住这一点可能对我有用。 – NewToJS

Mate this is AngularJs我建议使用Angular 4代替 –

我想出了两种可能的方法，根据选择标准。

第一个是刚刚的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 
    } 
}

它更明确，而且不易发生误报，但更详细。

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

来源

2017-10-20 13:31:22 RhoVisions

当点击元素的子元素时忽略点击事件

回答

相关问题