其实这个位置是一层层减去的，progressNode——》lineNode——》innerNode——》outerNode，

不过其中lineNode.left=1,innerNode.offsetLeft=0,所以老师没写，这么理解对吗

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【

progressNode.onclick=function(e){

var ev=e||event;

// 此处需要计算出点击位置在外层进度条的多少像素

// 层层减this.offsetLeft——>progressNode.offsetLeft=28

//   this.parentNode.offsetLeft——>lineNode.offsetLeft=1，可忽略

//   this.parentNode.parentNode.offsetLeft——>innerNode.offsetLeft=0

//   this.parentNode.parentNode.parentNode.offsetLeft——>outerNode.offsetLeft=？？？

// var length=ev.clientX-this.offsetLeft-this.parentNode.offsetLeft-this.parentNode.parentNode.offsetLeft-this.parentNode.parentNode.parentNode.offsetLeft;

var length=ev.clientX-this.offsetLeft-this.parentNode.parentNode.parentNode.offsetLeft;

length=length/this.offsetWidth*100+'%';

// console.log(this.offsetLeft);

// console.log(this.parentNode.offsetLeft);

// console.log(this.parentNode.parentNode.offsetLeft);

// console.log(this.parentNode.parentNode.parentNode.offsetLeft);

trueLine.style.width=length;

}

代码语言】突出显示