Question

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的百分比。

Answer 1

尝试使用event.offsetX

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

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

Answer 2

event.clientX正在为您提供相对于文档的x坐标。因此，您需要考虑元素的offsetLeft，如下所示：

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

上面的代码将减去offsetLeft位置中的元素clientX，此逻辑将给出点击相对于其被点击的元素的x位置。您的百分比计算将作为预期

jsfiddle：http://jsfiddle.net/ianjamieson/UCFtB/42/

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

2 个答案: