javascript - 如何停止在特定区域触发 focusout 事件

Question

我已经创建了一个自动填充下拉框，它在其他情况下工作正常，但它不适用于鼠标事件，如果我单击下拉选项然后 focusout 事件首先触发，因此单击事件不起作用我该如何处理案例。

这是一个 HTML:

<div class="wrapper">
 <input (input)="onType()" (focus)="onType(true)" class="form-control" 
 (focusout)="inputFocusOut($event)" type="text" 
 [placeholder]="placeholder"
 [(ngModel)]="inputModelValue" (keydown.enter)="onOptionSelect()" 
 (keydown.ArrowUp)="onUpKeyPress()" 
 (keydown.ArrowDown)="onDownKeyPress()">
 <div (click)="deselectValue()" *ngIf="showCrossBtn" 
  class="cross">X</div>
  <div id="drop-down" *ngIf="showDropdown" (click)="onOptionSelect()">
  <div *ngFor="let data of renderList; let i=index" 
  [id]="'search_element_'+i" class="text-wrapper" [ngClass]="
  {'active': selectedDropdownIndex == i}">
  <span>{{data.value}}</span>
  </div>
  </div>
  </div>

这是我的TS文件

从
导入{组件、输入、输出、EventEmitter、OnChanges} '@ Angular/核心';

@组件({ 选择器:'自动填充'， templateUrl: './auto-populate.component.html', styleUrls: ['./auto-populate.component.scss'] }) 导出类 AutoPopulateComponent {

 @Input() placeholder: string;
 @Input() dataList: Array<{ id: any, value: string }>;

 @Output() populatedValue: EventEmitter<any> = new EventEmitter<any>
();

 public inputModelValue: string = '';
 public showDropdown: boolean = false;
 public renderList: Array<any> = [];
 public selectedDropdownIndex = 0;
 public showCrossBtn: boolean = false;

 constructor() {
  this.renderList = this.dataList;
  }

 /**
  * on type in input-box
  */
 onType(firstFocus) {
  this.showDropdown = true;
  this.selectNewRenderList();
  //emit event while no data exists
  if (!this.inputModelValue.length && !firstFocus) {
   this.populatedValue.emit(null)
   }
  }

 inputFocusOut(event) {
 console.log("event click out",event);
 this.resetTheDropDown();
 }

 /**
  * this method run for dropdownselection for up key
  */
 onUpKeyPress() {
   if (this.selectedDropdownIndex > 0) {
   this.selectedDropdownIndex--;
  }
  this.scrollDropdown();
 }

 /**
  * this method run for dropdownselection
  */
 onDownKeyPress() {
   if (this.selectedDropdownIndex < this.renderList.length - 1) {
   this.selectedDropdownIndex++;
  }
 this.scrollDropdown();
 }

 /**
  * this methods resets the dropdown
  */
 resetTheDropDown() {
   this.selectedDropdownIndex = 0;
   this.showDropdown = false;
 }


 /**
  * on option select from dropdown
  */
 onOptionSelect() {
  debugger;
  if (this.renderList.length > 0) {
   this.inputModelValue = 
  this.renderList[this.selectedDropdownIndex].value;
this.populatedValue.emit(this.renderList[this.selectedDropdownIndex]);
  this.showCrossBtn = true;
  this.resetTheDropDown();
  }
}


/**
 *  Function to scroll dropdown 
 */
scrollDropdown() {
let divHeight = 
document.getElementById("search_element_0").offsetHeight;
let el = document.getElementById("drop-down");
if (el) {
  el.scrollTop = this.selectedDropdownIndex * divHeight;
 }
}


/**
 * this method update the rendered list 
 */
 selectNewRenderList() {
 let renderList = [];
 this.dataList.map((obj) => {
  let str = obj.value;
  let patt = new RegExp(this.inputModelValue, 'i');
  if (patt.test(str)) {
    renderList.push(obj);
   }
  });//map-closes
 this.renderList = renderList;
 }//selectNewRenderList-closes


 /**
  * deselect the value
  */
 deselectValue() {
  this.populatedValue.emit(null);
  this.showCrossBtn = false;
  this.inputModelValue = null;
 }
}//component-closes

Answer 1

将点击事件替换为 mousedown 而不是点击。