Angular 5 多个事件未调用

Question

我正在尝试在 angular5 中构建示例应用程序。代码示例如下。问题是在单击任何 table 行后，它仅触发文本框模糊事件并且未触发 table 行单击事件。我的要求是先触发 table 行点击事件，然后触发文本框模糊事件。有什么建议吗？

test.component.html

  <div class="container">
  <h1>Angular events</h1>
  <hr />
  <div class="row">
    <div class="col-xl">
      <input #inputText type="text" (keyup)="filterList(inputText.value)" (blur)="hideList()" />
      <table class="table" *ngIf="showList">
        <thead>
          <tr>
            <th scope="col">name</th>
            <th scope="col">date</th>
            <th scope="col">time</th>
            <th scope="col">price</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let event of gridEventList" (click)="selectItem($event)">
            <td>{{event.name}}</td>
            <td>{{event.date}}</td>
            <td>{{event.time}}</td>
            <td>{{event.price}}</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
</div>

test.component.ts

filterList(input:string) {
        console.log("filter list")
    }

    selectItem(event){ 
      console.log("select event row values")
    }

    hideList(){
      console.log("text lost focus")
    }

Answer 1

My requirement is to get table row click event fired first and then textbox blur event

您最好从 selectItem() 内部调用 hideList()，这样您就可以始终确保在选择 <tr> 之后触发它。我建议完全放弃模糊事件，然后就..

selectItem(evt){ 
    console.log("select event row values");
    this.hideList();
}

但是...如果你真的需要模糊事件，那么你需要交换：

<tr *ngFor="let event of gridEventList" (click)="selectItem($event)">

至：

<tr *ngFor="let event of gridEventList" (mousedown)="selectItem($event)">

这是因为点击事件的顺序是：mousedown > blur > click

The mousedown and blur events occur one after another when you press the mouse button, but click only occurs when you release it. Reference.

Angular 5 多个事件未调用

Angular 5 multiple events not calling

events

typescript

angular

angular5