如何检测用户是否点击了该div？答案

【问题标题】：How to detect if user clicked on that div?如何检测用户是否点击了该div？
【发布时间】：2017-10-05 21:30:32
【问题描述】：

我想要检查用户是否点击了特定 div 中的任何位置。如果不做某事。我试过这个：

handleClick(event){
        var clickedComponent = event.target;
        console.log(event.target,'adsadasdas');
        var inside = false;
        do {
            if (clickedComponent === this._eref.nativeElement) {
                inside = true;
            }
            clickedComponent = clickedComponent.parentNode;
        } while (clickedComponent);
        if(inside){
            console.log('inside');
        }else{
            console.log('outside');
        }
    }

问题是我在某些元素上有*ngIf，所以 event.target 有时是错误的。所以现在我添加了一个包装器，我想检查用户是否点击了该包装器。

【问题讨论】：

在div上添加点击事件？
但是当用户在那个 div 之外点击时，如何检测到呢？
在整个页面添加点击事件？
添加了一个答案@None 指令将提供帮助
@Pac0 我无法在整个页面上添加事件，因为该 div 在整个页面内，如果我单击将始终触发该事件

标签： angular

【解决方案1】：

为什么你只在视图下面使用？

<div *ngIf="cond" (click)="myEventHandler"></div>

在控制器中

myEventHandler(){
//do something
}

【讨论】：

是的，但是如果我在那个 div 之外点击呢？如果我单击该组件上的处理程序，如何处理它
点击

点击
onClick(event) { var target = event.target ||事件.src元素 ||事件.当前目标； var idAttr = target.attributes.id;变量值 = idAttr.nodeValue; if(value =="div1"){ //做某事 }else{ //做某事 } }

【解决方案2】：

看看这个指令归功于 - https://christianliebel.com/2016/05/angular-2-a-simple-click-outside-directive/

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef : ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter();

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(null);
        }
    }
}

也看看这个plunker

更新

import { Subscription } from 'rxjs/Subscription';

【讨论】：

我收到此指令的错误：类型“订阅”不可分配给类型“可观察”。 “订阅”类型中缺少属性“_isScalar”。
您需要添加导入以使用 rxjs 订阅
我添加了这个指令，但即使我点击了 div 中的某个组件，我也会再次出错
请检查 plunker
是的，但是我的包装器中有多个带有 ngIf 的组件，这些组件在某个时刻被隐藏了，我得到了真实的值，就像在外面点击它一样，但它不是