Question

我有一个div标签，可以用作具有多选功能的选择框。

<div class="multiselect" id="multiFocus" *ngIf="editMode" (focusout)="disableSelect($event)">
    <div class="selectBox">
        <div class="multi-select-user">
            <div style="width:180px; display:inline-block">
                <ng-container *ngFor="let selectedBaseVal of selectedBaseLicences.icdata; let baseVal=index">
                    <div class="base-selection" (click)="canshowCheckBoxes = !canshowCheckBoxes" *ngIf="(selectedBaseVal.License !== 'Select Base License')&& selectedBaseVal.Checked">
                        <span style="padding:5px;">{{selectedBaseVal.License}}</span>
                        <span class="icon-close icon--small icn-float" (click)="selectedBaseVal.Checked = !selectedBaseVal.Checked"></span>
                    </div>
                    <div style="padding:6px;" *ngIf="selectedBaseVal.License === 'Select Base License'">
                                            Select Base License
                    </div>
                 </ng-container>
            </div>
            <div (click)="canshowCheckBoxes = !canshowCheckBoxes" class="icon-dropdown icn-float inline-display">
            </div>
        </div>
    </div>
    <div class="multi-select-list" *ngIf="canshowCheckBoxes">
        <div id="baseCheckboxes" style="display:block; width:200px; border:1px solid #dfdfdf; border-top:none">
            <ng-container *ngFor="let base of selectedBaseLicences.icdata">
                 <div>
                     <label class="checkbox">
                         <input type="checkbox" [checked]="base.Checked" name="checkbox1" (change)="base.Checked = !base.Checked">
                         <span class="checkbox__input"></span>
                         <span class="checkbox__label">{{base.License}}</span>
                     </label>
                 </div>
            </ng-container>
    </div>
</div>

看起来像这样，我正在尝试的是，当我在div之外单击时，它应该被禁用，所以我尝试使用focusout事件，并且在disableSelect（）方法中，我只是在做一个值为假。但是聚焦事件无法正常进行。 div不支持聚焦吗？还是有其他禁用方法？

Answer 1

在代码focusout的第一行中加上blur。 (blur)="disableSelect($event)"

Answer 2

这里是绑定事件的方式。

function focuslost(e){
 alert('focusout');
}

div{

width:100px;
height:100px;
border :1px solid green;
}

<div onmouseout="focuslost(event)">
  <!-- (mouseout) in angular 4 or 5   -->
  Out from Here.
</div>

Answer 3

从div示例中移出鼠标时禁用基本按钮：

Solution

HTML：

<div style="background:red"(mouseout)="focuslost()" (mouseover)="focus()"  >
    <button [disabled]="disableButton"> Out from Here</button>
Touch here for enable
</div>

TS：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validator } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  disableButton: boolean = false;

   myForm: FormGroup;

  constructor(private fb: FormBuilder){
  }

  focuslost(event){
    console.log(event);
    this.disableButton = true;
  }

  focus(){
    this.disableButton= false;
  }
}

Answer 4

要使用 blur ，您应添加 tabindex （例如：tabindex =“ 3”）属性或 contentEditable 到div，然后它将支持模糊事件。

import 'package:lib2/lib2.dart' as lib2;

lib2.Element element2 = lib2.Element();

对于角度：

<<h1>Click in divs and outside of them</h1> <div onblur="alert('blur!')" style="border:1px solid #ccc; background-color: blue; color: white;"> This div could not support blur! </div> <br/> <br/> <div tabindex="1" onblur="alert('blur!')" style="border:1px solid #ccc; background-color: red; color: white;"> This div support blur! </div>

上面的示例可以按角度操作。

Angular：焦点事件不适用于div标签

4 个答案: