Question

我创建了一个自动填充的下拉框，在其他情况下也可以正常使用，但是如果单击下拉选项，则不适用于鼠标事件，因此首先触发焦点事件，因为单击事件不起作用，如何处理此事件情况。

这是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文件

从
导入{组件，输入，输出，事件发射器，OnChanges} '@ angular / core';

@Component（{ 选择器：“自动填充”， 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，而不是点击。

如何停止在特定区域触发聚焦事件

1 个答案: