使用clientx和clienty属性时，为什么一直未定义？

Question

var box=document.getElementById("box");
var display=document.getElementById("display");/*to display clientX result*/
var x=box.clientX;

box.addEventListener("click", show);

function show(){
    display.innerHTML=x;
}

我觉得我的头脑里有一些简单的东西让我看不清楚

Answer 1

属性是clientLeft和clientTop ，而不是clientX和clientY 。 请参阅Element接口 。 所以

var x=box.clientLeft;
// -------------^^^^

---

另外，这可能是也可能不是问题，取决于你正在做什么，这条线

var x=box.clientX;

从运行时的box获取clientX的值 ，然后存储该值 。 x和box.clientX之间没有持续的连接。 因此，当点击后出现，并show被调用时，显示值如前所述 ，当var x=box.clientX; 跑了。 根据具体情况，即使您将其设置为clientLeft ，也可能会获得0而不是有效值（如果您在初始加载页面时正在读取它，那么页面可能尚未布局）。 同样，根据您正在做的事情，您可能需要等待并在发生单击时查找box.clientLeft 。 例如：

var box = document.getElementById("box");
var display = document.getElementById("display");

box.addEventListener("click", show);

function show(){
    display.innerHTML = box.clientLeft;
}

Answer 2

如果要在box-element中获取鼠标单击的x位置，可以借助click-event提供的属性来实现此目的。

let box = document.getElementById("box");
let display = document.getElementById("display");

function showMouseX(event){
    display.innerHTML = event.clientX;
}

box.addEventListener("click", showMouseX);