单击 div 内的输入时调用 angular div (clickOutside)

【问题标题】：angular div (clickOutside) is called when clicking input inside of div单击 div 内的输入时调用 angular div (clickOutside)
【发布时间】：2021-02-16 01:01:14
【问题描述】：

我在 div 中使用 (clickOutside) 指令，当我单击 div 内的输入元素时调用它。

<div class="col-4 align-self-center" (click)="setMethod(true)"
     (clickOutside)="setMethod(false)" >
    <button type="button" mat-raised-button color="accent" >
        <input type="text"
               class="form-control"
               *ngIf="activeTitle"
               [(ngModel)]="title" />
    </button>
</div>

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

您可以绑定到 (blur) 事件，而不是使用 (clickOutside)。也许这对你有用？

请注意，当组件失去焦点时会触发 blur 事件。这意味着为了使 blur 触发，HTML 元素需要首先获得焦点。例如。用户必须用鼠标点击它。当您的用户单击该元素内部的任何位置时，您可以在该元素上调用 focus() 方法，从而确保当元素失去焦点时触发 blur。

例如：

<div
    class="col-4 align-self-center"
    (click)="setMethod(true)"
    (blur)="setMethod(false)"
>
    <button
        type="button"
        mat-raised-button color="accent"
    >
        <input
            type="text"
            class="form-control"
            *ngIf="activeTitle"
            [(ngModel)]="title"
        />
    </button>
</div>

【讨论】：