Angular 5中点击滚动条时如何触发弹窗关闭事件？

嘿，这个问题我之前也碰到过！其实是因为表格滚动条的点击事件没有被你的现有监听逻辑覆盖到，咱们可以用下面两种方法来解决：

我们可以给整个文档添加点击监听，然后细致区分点击的区域——是弹窗内、表格内容区，还是表格滚动条区，从而触发关闭逻辑。

实现步骤： #

1. 在组件中引入必要的依赖并添加全局监听：

import { Component, HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isPopupVisible = false;
  private popupEl: HTMLElement | null = null;
  private tableEl: HTMLElement | null = null;

  constructor(private el: ElementRef) {}

  @HostListener('document:click', ['$event'])
  handleDocumentClick(event: MouseEvent) {
    if (!this.isPopupVisible) return;

    // 获取弹窗和表格元素（确保模板里有对应的类或引用）
    this.popupEl = this.popupEl || this.el.nativeElement.querySelector('.filter-popup');
    this.tableEl = this.tableEl || this.el.nativeElement.querySelector('.data-table');

    if (!this.popupEl || !this.tableEl) return;

    // 判断点击是否在弹窗内
    const isInPopup = this.popupEl.contains(event.target as Node);
    // 判断点击是否在表格的内容区域（tbody）
    const isInTableContent = this.tableEl.querySelector('tbody')?.contains(event.target as Node);
    // 判断点击是否是表格滚动条（属于表格但不在内容区）
    const isOnScrollbar = this.tableEl.contains(event.target as Node) && !isInTableContent;

    // 不在弹窗内，且是滚动条或表格外区域，就关闭弹窗
    if (!isInPopup && (isOnScrollbar || !this.tableEl.contains(event.target as Node))) {
      this.closePopup();
    }
  }

  openPopup() {
    this.isPopupVisible = true;
    // 重置元素引用，确保每次打开都能获取最新的DOM
    this.popupEl = null;
    this.tableEl = null;
  }

  closePopup() {
    this.isPopupVisible = false;
  }
}

2. 给模板里的表格和弹窗加上对应的类：

<table class="data-table">
  <tr>
    <td>
      <button (click)="openPopup($event)">打开筛选弹窗</button>
      <div class="filter-popup" *ngIf="isPopupVisible">
        <!-- 你的筛选表单内容 -->
      </div>
    </td>
  </tr>
  <!-- 表格其他行数据 -->
</table>

这种方法更轻量化，只监听表格本身的点击，判断点击位置是否属于滚动条区域：

实现步骤： #

1. 在模板中给表格绑定点击事件：

<table class="data-table" (click)="handleTableClick($event)">
  <!-- 表格内容 -->
</table>

2. 在组件中实现判断逻辑：

handleTableClick(event: MouseEvent) {
  if (!this.isPopupVisible) return;

  const table = event.currentTarget as HTMLElement;
  // 当点击位置的X坐标超过表格的可视宽度，说明点击的是滚动条
  const isScrollbarClicked = event.clientX > table.clientWidth;

  if (isScrollbarClicked) {
    this.closePopup();
  }
}

表格的滚动条属于表格元素的一部分，但默认情况下点击滚动条时，事件的目标是表格本身，而不是你之前监听的表格内部内容区域（比如tbody），所以原来的判断会把滚动条点击当成“表格内区域”，不会触发关闭。上面两种方法都是通过精准区分滚动条区域，来补上这个逻辑缺口。

内容的提问来源于stack exchange，提问作者MogerCS