在div中检测单击的水平位置

Question

When i click on streaming bar, position will be detected from left edge of the browser window but it has to be detected from left edge of the #progressBar div in this demo . So, because of positioning #progressBar div with left: 200px; 200px is added on horizontal position that is clicked.

My simple detecting function:

function point_it(e){
      var x=e.clientX; 
      var seekSecond = Math.floor((x/1100) * ytplayer.getDuration()); //1100 is width of the progress bar 
      seekTo(seekSecond);
      document.getElementById("xPos").innerHTML=x;
    }

style:

    #progressBar{
position: relative;
top: 400px;
left: 200px;
width: 1100px;
height: 4px;
border: 2px solid gray;
margin: 10px;
z-index: 8;
}


#elapsedBar{
position: relative;
top: -1px;
width:0px;
height:3px;
border:1px solid;
border-color: #660033;
background-color: #660033;
margin:0px;
z-index: 10;
}

#loadedBar{
position: relative;
top: 0px;
width: 0px;
height:4px;
border:1px solid;
border-color: gray;
background-color: gray;
margin:0px;
z-index: 9;
}

Answer 1

You can subtract the left position from the clicked position, I only know the jQuery way of doing this:

// Get the "left" value
var leftPos = $("#progressBar").css("left");
// Remove "px"
var leftPos = leftPos.replace("px", "");

Then subtract leftPos from the value you are getting

Answer 2

Just use e.offsetX in your function instead of e.clientX .

e.client... is related to the browsers window, e.offsett... is related to the clicked target element.

Answer 3

You have to subtract 10 from x because of margin: 10px; . This causes var x=e.clientX; to be 10 when clicking on the left side of the bar.