Javascript Angular MouseeEvent on:after元素为event.toElement.clientWidth提供了错误的值

我有一个音频播放器元素，我正在设计的角度，模仿soundcloud页面底部的soundcloud播放器

它有一条橙色的线（播放器当前进度），描绘了已经播放的曲目的元素。它还有一个橙色圆圈，描绘了轨迹的当前位置

当我单击'player-progress-container'div（见下文）上的任意位置时，它给出了当前位置、事件.layerX位置和事件.toElement.clientWidth它的父进程容器的宽度。我用这个来改变音频播放器的位置

但是，当我点击圆圈元素时，我有代表当前轨迹位置的圆圈元素，它是玩家当前进度：在下方的元素计算事件。layerX位置正确，但是event.toElement.clientWidth现在似乎是作为玩家当前进度的宽度而不是其父进程的宽度来给出的

有人知道它为什么这样做，以及如何解决它吗？我在下面列出了所有相关的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>

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

---

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

changePosition

：

请参见演示

---

或者，您可以将

layerX

和

clientWidth

直接传递到

changePosition

：

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

---

请参阅演示。

除了下面的@ConnorsFan答案之外，我还想添加一个关于此的问题：

[style.width.%]=“（位置*100）/length”

为什么不在组件中的函数中进行该计算，并像下面所说的那样传递值？@jmb.mage为什么在函数中进行该计算比在html中进行该计算更好？@tom obrien这是一个编码实践选择。原因#1：作用域，在HTML文件中包含JS变量会使确定它们所处的作用域变得困难。将JS保存在JS文件中只会使作用域保持干净和简单。原因2：如果JS代码增长或更改，最好在组件中使用。

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

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

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