Javascript Pure JS：获取在div中单击的水平位置的百分比？

在纯Javascript中，如何获得相对于元素宽度单击的水平位置的百分比？现在我得到了矩形覆盖的视口像素除以offsetWidth*100，这给了我一些与预期完全不同的东西。例如：如果我点击绿色方框的x中心，我得到50%

我读过关于getBoundingClientRect（）的文章，但我不确定这是否能解决这个问题以及如何使用它

---

编辑：我的数学可以被关闭吗？据我所知，为了得到百分比，我需要计算N1/N2*100。

尝试使用

event.offsetX

document.getElementById('test').addEventListener("click", function(event){
    var test = event.offsetX;
    alert(test);
});

---

jsiddle

尝试使用

event.offsetX

document.getElementById('test').addEventListener("click", function(event){
    var test = event.offsetX;
    alert(test);
});

---

jsiddle

事件。clientX

将为您提供与文档相关的x坐标。因此，您需要考虑元素的

offsetLeft

，如下所示：

document.getElementById('test').addEventListener("click", function(event){
    var test = (event.clientX-this.offsetLeft) / this.offsetWidth * 100;
    console.log(test);
});

上面的代码将从

clientX

位置减去元素

offsetLeft

，该逻辑将给出点击相对于点击元素的x位置。然后，您的百分比计算将按预期进行

---

jsiddle:

事件。clientX

将为您提供与文档相关的x坐标。因此，您需要考虑元素的

offsetLeft

，如下所示：

document.getElementById('test').addEventListener("click", function(event){
    var test = (event.clientX-this.offsetLeft) / this.offsetWidth * 100;
    console.log(test);
});

上面的代码将从

clientX

位置减去元素

offsetLeft

，该逻辑将给出点击相对于点击元素的x位置。然后，您的百分比计算将按预期进行

---

JSIDLE:

“如何获得纯Javascript中在div中单击的水平位置的百分比？”与元素宽度相关的水平位置？@guest271314哦，是的，我将编辑我的问题。

event.clientX

为您提供了相对于文档的x坐标。@IanJamieson确实如此。我如何才能使其与元素宽度相关？@Asperger，我更新了一个答案。“我如何才能获得纯Javascript中div内单击的水平位置的百分比？”与元素宽度相关的水平位置？@guest271314哦，是的，我将编辑我的问题。

event.clientX

将为您提供相对于文档的x坐标。@IanJamieson确实如此。如何根据元素宽度来确定它？@Asperger，我已经更新了一个答案。好的，为了获得更多信息，我想我会接受你的答案，因为你添加了“-this.offsetLeft”并且它更完整。另一个答案更清晰，在这种情况下更正确。好吧，为了获得更多信息，我想我会接受你的答案，因为你添加了“-this.offsetLeft”并且它更完整。另一个答案更清晰，在这种情况下更正确。