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

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

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

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

我读了有关getBoundingClientRect（）的文章，但是我不确定这是否可以解决问题以及如何使用。

编辑：我的数学可以关闭吗？据即时消息，为了获得百分比，我需要计算N1 / N2 * 100。

尝试使用 event.offsetX

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

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