进度条寻找正确的目标元素答案

【问题标题】：Progress Bar Seek Correct Target Element进度条寻找正确的目标元素
【发布时间】：2015-06-25 12:26:44
【问题描述】：

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

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

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

我用于 seek 函数的代码如下：

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% 时，您实际上是点击了“进度条”类 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

但这不起作用。这种情况下如何选择目标的父元素？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

如何添加事件监听器？ part 和 full 元素都应该接收事件，例如：

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

&lt;div class='bar'&gt;&lt;div class='part'&gt;&lt;/div&gt;&lt;/div&gt;

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

【讨论】：