Question

我有这个html结构：

<div *ngFor="test  of tests" (click)="selectItem(test)">
   <div>{{test.number}}</div>
   <div>
      <select (change)="selectGroup(group)">
            <option *ngFor="let destination of groupDestinations" 
            [(value)]="destination.code">{{destination.displayname}}</option>     
     </select> 
  </div>
</div>

问题是，当我更改选择时，它会检测为点击，然后调用方法selectItem。任何建议我怎么能避免这种情况？

Answer 1

使用$event.stopPropagation()来阻止事件在DOM中向上冒泡。

<select (change)="selectGroup(group)" (click)="$event.stopPropagation()">
   ...   
</select>

Answer 2

您可以尝试添加类似的条件

<select 
  (change)="selectGroup(group)"
  (click)="selectClicked = true"
  (focus)="selectClicked = true"
  (blur)="selectClicked = false"
>

在您的TS中

selectItem(value) {
  setTimeout(() => {
    if(!this.selectClicked) {/* do your stuff */}
  });
}

值得一试！

如果我在div上有点击事件，如何避免检测div中的点击下拉？

2 个答案: