Javascript 获取元素'的不正确值；从clientLeft、clientTop、offsetLeft和offsetTop选择s位置

我试图返回一个元素的位置，但由于某些原因，client、scroll和offset的left和top值总是错误的。这里的目标是确定用户是否在下拉元素之外单击，如果是，则关闭它，以便我需要一个准确的位置，以便元素与单击位置进行比较

例如，我使用标尺检查元素的位置，它读取的左值为1013px，顶值为484px。但是，当我在代码中获取元素并检查offsetLeft时，值为3，offsetTop为16。这是怎么回事？看起来我得到的是相对于父对象而不是文档的位置

我使用angular并使用组件中的模板引用获取元素

下拉列表.component.ts

@ViewChild('dropdown') dropdown: any; // Template reference to the element

constructor(
  private elementRef: ElementRef // Reference to the :host element
} { }

ngOnDestroy() {
  this.elementRef.nativeElement.removeEventListener('click', this.handleClick.bind(this));
}

ngOnInit() {
  this.subscribeToClickEvent();
}

private handleClick(event: MouseEvent): void {
  // this.dropdown.nativeElement.clientLeft equals 0
  // this.dropdown.nativeElement.clientTop equals 0
  // this.dropdown.nativeElement.offsetLeft equals 3
  // this.dropdown.nativeElement.offsetTop equals 16
  // this.dropdown.nativeElement.scrollLeft equals 0
  // this.dropdown.nativeElement.scrollTop equals 0
  // Left should equal ~1013 and top should equal ~484
}

private subscribeToClickEvent(): void {
  this.elementRef.nativeElement.addEventListener('click', this.handleClick.bind(this));
}

---

您必须使用元素.getBoundingClientRect（）来获得准确的位置。

我认为不需要添加任何内容，getBoundingClientRect似乎提供了更准确的位置日期。您应该使用getBoundingClientRect将答案更新为只说一句