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

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

＆＃13;

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

＆＃13;

.bar, .part {
    height: 50px;
}

.bar {
    width: 200px;
    background: gray;
}

.part {
    width: 100px;
    background: lightblue;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: