clientLeft、clientTop、offsetLeft、およびoffsetTopから要素の位置の値が不正確になる

Question

要素の位置を返そうとしていますが、何らかの理由でクライアント、スクロール、オフセットの値が常に誤っています。ここでの目標は、ユーザーがドロップダウン要素の外側をクリックしたかどうかを判断することです。閉じている場合は、要素をクリック位置と比較する正確な場所が必要です。

たとえば、ルーラーを使用して要素の位置を確認したところ、左の値は1013px、上の値は484pxです。しかし、コード内の要素を取得してoffsetLeftをチェックすると、値は3になり、offsetTopは16になります。ここでは何が起こっていますか？私は文書の代わりに親に相対的な位置を取得しているようです。

私はangleを使用し、コンポーネント内のテンプレート参照を使用して要素を取得します。

dropdown.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)); 
} 

Answer 1

あなたが正確な位置を取得するためにelement.getBoundingClientRect（）を使用する必要があります。