:after 元素上的 Angular MouseEvent 为 event.toElement.clientWidth 提供了错误的值答案

【问题标题】：Angular MouseEvent on :after element gives wrong value for event.toElement.clientWidth:after 元素上的 Angular MouseEvent 为 event.toElement.clientWidth 提供了错误的值
【发布时间】：2018-08-10 13:55:10
【问题描述】：

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

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

当我点击 'player-progress-container' div（见下文）上的任意位置时，它会给出当前位置、event.layerX 位置和 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;
}

【问题讨论】：

除了下面的@ConnorsFan 回答之外，我还要添加一个关于此的问题：[style.width.%]="(position * 100)/length" 为什么不在你的组件中的函数中进行计算，并像他在下面所说的那样传递值？
@jmb.mage 为什么在函数中比在 html 中更好？
@tom-obrien 这是编码实践的选择。原因 #1：范围，在 HTML 文件中包含 JS 变量使得很难确定它们在什么范围内。将 JS 保留在 JS 文件中只是保持范围干净和简单。原因2：如果JS代码增长或变化，最好放在一个组件中。

标签： javascript css angular

【解决方案1】：

为确保始终获得容器的宽度，您可以将该元素作为参数传递给changePosition，并借助template reference variable：

<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 以获取演示。

【讨论】：