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。参见the Element interface。所以

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

另外，根据您正在执行的操作，这可能是问题也可能不是问题

var x=box.clientX;

在运行时从clientX获取box的值，然后存储该值。 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

如果要在框元素内部获取鼠标单击的x位置，则可以借助click-event提供的属性来实现这一点。

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

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

box.addEventListener("click", showMouseX);

为什么在使用clientx和clienty属性时会一直保持未定义状态？

2 个答案: