javascript - 纯 JS : Get percentage of the horizontal position clicked within a div?

Question

http://jsfiddle.net/UCFtB/33/

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

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

我阅读了有关 getBoundingClientRect() 的信息，但我不确定这是否会解决问题以及如何使用它。

编辑:我的数学有问题吗？据我所知，为了获得百分比，我需要计算 N1/N2 * 100。

Answer 1

尝试使用 event.offsetX

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

jsfiddle http://jsfiddle.net/UCFtB/38/