从带有图像的子按钮获取父 HTML 宽度答案

【问题标题】：Get Parent HTML width from child button with image从带有图像的子按钮获取父 HTML 宽度
【发布时间】：2022-11-16 02:41:24
【问题描述】：

我有一个包含我要提取的列数的数组

leftPlace = <(number | undefined)[]>[];

在 HTML 中我有按钮，我点击它来提取列

<th class="table-cell">
  <div class="table-cell-content date-column">
    <button (click)="sendLeft($event.target)" style="color: white;">
      <fa-icon [icon]="['fas', 'location-pin']"></fa-icon>
    </button>
  </div>
</th>

我用来提取列宽的空白：

sendLeft(value?: EventTarget | null) {
  if (value instanceof Element) {
    this.leftPlace[this.columnCounter] = value.parentElement?.parentElement?.getBoundingClientRect().width;
    this.columnCounter++;
  }
}

如果我用<fa-icon [icon]="['fas', 'location-pin']"></fa-icon>来做它给了我 fa-icon 的宽度，而不是父对象，我不知道为什么......

但是，如果我在段落中使用通常的文本，它就完美了

【问题讨论】：

标签： javascript html angular

【解决方案1】：

将 $event.target 替换为 $event.currentTarget。

来自事件的target 属性指定了调度事件的元素，在这种情况下，被点击的按钮（或按钮本身）中的元素，包括图标。

来自MDN docs：

Event 接口的只读目标属性是对事件被分派到的对象的引用。

事件中的 currentTarget 属性指定事件侦听器附加到的元素，在本例中为按钮本身。

来自MDN docs

Event 接口的 currentTarget 只读属性标识事件的当前目标，因为事件遍历 DOM。它始终引用事件处理程序已附加到的元素，而不是 Event.target，它标识事件发生的元素并且可能是它的后代。

【讨论】：