模糊效果不起作用 - Angular 2

Question

我正在尝试在Angular 2中设置蓝色事件，如下所示：

<div id="area-button" (blur)="unfocusAreaInput()" class="form-group" (click)="focusAreaInput()">

组件.ts:

import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import { GoogleplaceDirective } from 'angular2-google-map-auto-complete/directives/googleplace.directive';

@Component({
    selector: 'my-area',
    directives: [GoogleplaceDirective],
    templateUrl: 'app/find-page/area-picker.component.html',
    styleUrls: ['app/find-page/area-picker.component.css']
})
export class AreaComponent {
    public address: Object;
    @ViewChild('areaInput') areaInput;
    areaSelected: boolean = false;
    @Output() onAreaSelected = new EventEmitter<boolean>();
    @Output() onAreaDeselected = new EventEmitter<boolean>();

    constructor(el: ElementRef) { }
    getAddress(place: Object) {
        this.address = place['formatted_address'];
        var location = place['geometry']['location'];
        var lat = location.lat();
        var lng = location.lng();
        console.log("Address Object", place);
    }

    focusAreaInput() {
        this.areaInput.nativeElement.focus();
        this.onAreaSelected.emit(true);
    }

        unfocusAreaInput() {
        this.onAreaSelected.emit(false);
    }
}

为什么unfocusAreaInput()从未被执行？

- BeniaminoBaggins

Answer 1

你的 blur 事件不起作用，是因为你的 div 无法接收焦点。如果你给你的 div 添加 tabindex="1"（1 可以替换为任何数字）或 contentEditable（这将使 div 的内容可编辑），那么它就能够接收焦点，然后 blur 事件将会起作用。此外，你可以使用 focus 而不是 click。

- Stefan Svrkota

---

设置tabindex=0后，div仍然无法正常工作（模糊），该div还包含ngIf，这是否有影响？ - Sunil Garg

这个不起作用...有更新的答案吗？除非展示一个可行的例子，否则不应将其标记为答案。 - Funn_Bobby

这不起作用是因为初始化时div没有获得焦点。 我在ngOnInit()中添加了window.document.getElementById('container').focus()，然后它就起作用了。同时还需要在css中对div进行outline:0的设置。 - Emilia Heller-Mrotek

Answer 2

您也可以在

上尝试(focusout)="unfocusAreaInput()"。这将在

内任何可聚焦元素失去焦点（包括元素被移除时）并且另一个元素不同时聚焦时触发。

如果您想知道在您的

内失去焦点的是哪个元素，您可以像这样传递：(focusout)="unfocusAreaInput($event.target)"。

更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

- Kevin Beal

Answer 3

使用tabindex属性来设置它。 设置

tabindex="0" 

将其设置为最高优先级，以便获得焦点，这样您的 blur 事件将起作用。

- Ankit Kapoor

---

即使设置了tabindex=0，(blur)在div上仍然无法工作。 - Sunil Garg