使用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;
}

I feek like there is something simple going over my head that I just cant see

Answer 1

The properties are clientLeft and clientTop , not clientX and clientY . See the Element interface . So

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

---

Separately, and this may or may not be a problem depending on what you're doing, the line

var x=box.clientX;

gets the value of clientX from box as of when it runs, and then stores that value . There's no ongoing connection between x and box.clientX . So when the click occurs later and show is called, it shows the value as of earlier , when var x=box.clientX; ran. Depending on when that is, even if you make it clientLeft , you may get 0 instead of a valid value (if you're reading it during the initial loading of the page, and so the page may not have been laid out yet). Again, depending on what you're doing, you may want to wait and look up box.clientLeft when the click occurs. Eg:

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

box.addEventListener("click", show);

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

Answer 2

If you want to get the x-position of the mouse-click inside the box-element, you can achieve this with the help of the properties provided by the click-event.

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

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

box.addEventListener("click", showMouseX);