javascript - 检测 div 中单击的水平位置

Question

当我单击流媒体栏时，将从浏览器窗口的左边缘检测位置，但在此演示#progressBar中必须从div 的左边缘检测位置。因此，由于在单击的水平位置上添加了 200px 的定位 div 。#progressBarleft: 200px;

我的简单检测功能：

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

风格：

    #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

您可以从单击位置减去左侧位置，我只知道 jQuery 这样做的方式：

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

leftPos然后从你得到的值中减去

Answer 2

只需e.offsetX在您的函数中使用而不是e.clientX.

e.client...与浏览器窗口e.offsett...有关，与单击的目标元素有关。

Answer 3

你必须减去 10x因为margin: 10px;. var x=e.clientX;单击栏的左侧时，这将导致为 10。