javascript - :after element gives wrong value for event. toElement.clientWidth 上的 Angular MouseEvent

Question

我在 Angular 中设计了一个音频播放器元素，它模仿位于 soundcloud 页面底部的 soundcloud 播放器。

它有一条橙色线 (player-progress-current)，表示已经播放过的轨道元素。它还有一个橙色圆圈，表示轨道的当前位置。

当我点击 'player-progress-container' div(见下文)的任意位置时，它会给出当前位置、event.layerX 位置和 < strong>event.toElement.clientWidth 这是它的父 player-progress-container 的宽度。我用它来改变音频播放器的位置。

然而，当我点击代表轨道当前位置的圆形元素时，它是 player-progress-current:after 元素，它计算 event.layerX 位置正确，但 event.toElement.clientWidth 现在似乎被指定为 player-progress-current 的宽度，而不是它的父级。

有谁知道它为什么这样做，以及如何解决它？我在下面包含了所有相关的 CSS、HTML 和 Angular 内容

changePosition(event: MouseEvent) {
    console.log("event.layerX  = " + event.layerX);
    console.log("event.clientWidth = " + event.toElement.clientWidth);
}

HTML 看起来像这样:

<div class="player-progress-container" (click)="changePosition($event)">
    <div class="player-progress-background"></div>
    <div class="player-progress-current"
        [style.width.%]="(position * 100)/length"></div>
</div>

CSS 看起来像这样:

.player-progress-container {
  width: 400px;
  flex-grow: 1;
  padding: 10px 0px 2px 0px;
  margin: 0px 10px 0 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}

.player-progress-background {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.player-progress-current {
  position: relative;
  width: 50%;
  height: 1px;
  background: red;
  bottom: 1px;
}

.player-progress-current:after {
  content: '';
  position: absolute;
  right:-3px; top: -3.5px;
  border: 1px solid #f50;
  border-radius: 55%;
  height: 8px;
  width: 8px;
  background-color: #f50;
  box-sizing: border-box;
}

Answer 1

为了确保您始终获得容器的宽度，您可以在 template reference variable 的帮助下将该元素作为参数传递给 changePosition :

<div #container class="player-progress-container" (click)="changePosition($event, container)">
  ...
</div>

changePosition(event: MouseEvent, container: HTMLElement) {
  console.log("event.layerX  = " + event.layerX);
  console.log("clientWidth = " + container.clientWidth);
}

参见 this stackblitz用于演示。

---

作为替代方案，您可以将 layerX 和 clientWidth 直接传递给 changePosition:

<div #container (click)="changePosition($event.layerX, container.clientWidth)" ...>
  ...
</div>

changePosition(layerX: number, clientWidth: number) {
  console.log("layerX  = " + layerX);
  console.log("clientWidth = " + clientWidth);
}

参见 this stackblitz用于演示。