Javascript 在滚动文档页面上，Priming p下拉列表应关闭

在p表中有p下拉列表作为列标题。滚动p表时，p下拉菜单应关闭

<p-table #dTable [columns]="cols">
<ng-template pTemplate="header">
  <tr class="table-header-row">
    <th *ngFor="let col of cols" [ngStyle]="{'width': col.widthPer ? col.widthPer + '%' : col.widthPx + 'px'}">
      {{col.header}}
    </th>
  </tr>
  <tr class="table-header-row">
    <th *ngFor="let col of cols" [ngSwitch]="col.field"
      [ngStyle]="{'width': col.widthPer ? col.widthPer + '%' : col.widthPx + 'px'}">
      <input [(ngModel)]="designNameFilterValue" *ngSwitchCase="'designName'" pInputText class="design-name-filter"
        (keyup)="refreshTree(hideNonSelected, defaultFilter)">
      <div *ngSwitchCase="'cost'">
        Value >= {{cost| currency}}
        <i class="fa fa-close"
          (click)="costFilterValue = 0; refreshTree(hideNonSelected, defaultFilter);"
          style="cursor:pointer" *ngIf="costFilterValue"></i>
        <p-slider [(ngModel)]="cost" [min]="0" [max]="maxCost"
          (onSlideEnd)="refreshTreeTable(hideNonSelected, defaultFilter)"></p-slider>
      </div>
      <p-dropdown class="filter" *ngSwitchCase="'risk'" [options]="filterdropdown" (click)="hide()"
        [(ngModel)]="FilterValue" (onChange)="refreshTree(hideNonSelected, defaultFilter)">
      </p-dropdown>
      <p-dropdown class="state-filter" *ngSwitchCase="'state'" [options]="stateItemsForFilterDropDown"
        (click)="hide()" [(ngModel)]="defaultFilter"
        (onChange)="refreshTree(hideNonSelected, defaultFilter)">
      </p-dropdown>
    </th>
  </tr>
</ng-template>

{{col.header}}
价值>={{成本|货币}

---

请在这方面提供帮助。

好吧，在实现该功能之后，我也遇到了类似的需求。考虑到以下情况，我们意识到它不是有效的

想想移动用户，下拉菜单中有一个带有输入框的搜索或过滤功能

因此，每当用户关注输入字段时，它都会打开下拉列表，同时，它会打开移动键盘，从而减少视口和fire scroll事件。在滚动条上，您要关闭下拉列表。考虑到上述情况，我们必须避免循环（开-关）。如果你只有桌面用户，那也没关系

因此，如果您只有一个桌面用户，您就可以实现这一点

应用程序组件.ts

import { Component , Inject} from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { HostListener} from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  cities1 = [];
  constructor() {
    this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];
  }
  @HostListener("window:scroll", [])
  onWindowScroll() {
    const ele = document.getElementById('mydiv');
    ele.click();
  }
}

---

这是stackblitz

嗯，在实现该功能之后，我还运行了类似的需求。考虑到以下情况，我们意识到它不是有效的

想想移动用户，下拉菜单中有一个带有输入框的搜索或过滤功能

因此，每当用户关注输入字段时，它都会打开下拉列表，同时，它会打开移动键盘，从而减少视口和fire scroll事件。在滚动条上，您要关闭下拉列表。考虑到上述情况，我们必须避免循环（开-关）。如果你只有桌面用户，那也没关系

因此，如果您只有一个桌面用户，您就可以实现这一点

应用程序组件.ts

import { Component , Inject} from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { HostListener} from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  cities1 = [];
  constructor() {
    this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];
  }
  @HostListener("window:scroll", [])
  onWindowScroll() {
    const ele = document.getElementById('mydiv');
    ele.click();
  }
}

---

这里是stackblitz

这更像是对启动的支持/功能请求。建议您在那里提出请求。这更像是对启动的支持/功能请求。建议您在那里提出请求。我们只有桌面用户。我可以使用你的实现。你能提供吗solution@Nazeer_hanne更新了我的答案，如果你想在应用程序中使用全局处理程序，你可以对其进行进一步优化。如何对水平滚动进行同样的操作？我的意思是在prime ng表中滚动，而不是在Window中。您可以找到或聚焦任何带有#或仅通过id的元素，您可以将滚动移动到左侧。这将是同样的方式。或者共享stackblitz。我们只有桌面用户。我可以使用你的实现。你能提供吗solution@Nazeer_hanne更新了我的答案，如果你想在应用程序中使用全局处理程序，你可以对其进行进一步优化。如何对水平滚动进行同样的操作？我的意思是在prime ng表中滚动，而不是在Window中。您可以找到或聚焦任何带有#或仅通过id的元素，您可以将滚动移动到左侧。这将是同样的方式。或者分享闪电战。