Javascript 如何停止在特定区域触发focusout事件
我已经创建了一个自动填充下拉框,它在其他情况下可以正常工作,但在鼠标事件中不起作用。如果我单击下拉选项,则会首先触发focusout事件。因此,单击事件不起作用。我如何处理此情况 以下是一个HTML:Javascript 如何停止在特定区域触发focusout事件,javascript,angular5,Javascript,Angular5,我已经创建了一个自动填充下拉框,它在其他情况下可以正常工作,但在鼠标事件中不起作用。如果我单击下拉选项,则会首先触发focusout事件。因此,单击事件不起作用。我如何处理此情况 以下是一个HTML: <div class="wrapper"> <input (input)="onType()" (focus)="onType(true)" class="form-control" (focusout)="inputFocusOut($event)" type="text
<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文件
从导入{Component,Input,Output,EventEmitter,OnChanges}
'角/核'
@组成部分{
选择器:“自动填充”,
templateUrl:'./auto-populate.component.html',
样式URL:['./自动填充.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
将click事件替换为mousedown而不是click。请格式化代码