javascript - 进度条寻找正确的目标元素

Question

我正在为音频播放器使用 Bootstrap 进度条。它看起来像这样:

http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

如果您尝试向前搜索(超过进度条的当前值)，我的搜索功能将正常工作。

我用于搜索功能的代码如下:

seek: function(e) {
  if (!audio.readyState) return false;
  var xpos = e.offsetX / e.target.offsetWidth;
  audio.currentTime = (xpos * audio.duration);
}

但是，如果你试图向后寻找(点击一个小于当前值的值)，该值将不正确，因为e.target.offsetWidth不是整个进度条，而只是进度条的蓝色部分.

例如，如果进度条值为 50%，而您点击/搜索到 25%，该值将不会改变。这是因为当您点击整个进度条的 25% 时，您实际上点击了“progress-bar”类 div(蓝色部分)的 50%。

<div class="progress ng-isolate-scope" max="1" value="(player.currentTime / player.duration)" ng-click="player.seek($event)">
  <div class="progress-bar" ng-class="type &amp;&amp; 'progress-bar-' + type" role="progressbar" aria-valuenow="0.18599028015468233" aria-valuemin="0" aria-valuemax="1" ng-style="{width: percent + '%'}" aria-valuetext="19%" ng-transclude="" style="width: 18.6%;"></div>
</div>

我需要这个:

var xpos = e.offsetX / e.target.offsetWidth

变成这样:

var xpos = e.offsetX / e.target.parent().offsetWidth

但这行不通。这种情况下如何选择目标的父元素？

Answer 1

如何添加事件监听器？部分元素和完整元素都应接收事件，例如:

document.querySelector('.bar').addEventListener('click', function(e) {
    console.log('bar', e);
});
document.querySelector('.part').addEventListener('click', function(e) {
    console.log('part', e);
});

.bar, .part {
    height: 50px;
}

.bar {
    width: 200px;
    background: gray;
}

.part {
    width: 100px;
    background: lightblue;
}

<div class='bar'><div class='part'></div></div>

单击示例中的蓝色部分会触发两个事件监听器，因此您只需要监听 .bar(完整)元素上的事件。