offsetLeft,clientX,clientWidth简单了解

clientX,clientY/pageX,pageY

	let box1 = document.getElementsByClassName("box1")[0];
    //e.clientX-------------当前点击点距离浏览器视窗左边的距离
    //e.clientY-------------当前点击点距离浏览器视窗上边的距离
    //pageX与pageY,是包含了body被卷起来的部分，即当屏幕窗口缩放有滚动条时，它是加上滚动条左边值或上边值
    box1.addEventListener("click",function (e) {

        //offsetX,鼠标在box1里头点击，当前点击点距离box1左边的距离
        //offsetX,鼠标在box1里头点击，当前点击点距离box1上边的距离
        console.log(e.clientX);
        console.log(e.clientY);
        console.log(e.pageX);
        console.log(e.pageY);
        console.log(e.offsetX);
        console.log(e.offsetY);
    })

clientWidth–clientHeight

	//屏幕视窗宽度和高度
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    let height = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(width,height)

offsetLeft,offsetTop

	let box3 = document.getElementsByClassName("box3")[0];
    //offsetLeft---------offsetTop
    //指当前dom元素距离body节点，即视窗节点的左边或上边距离,也就是box3左上角的x和y坐标
    console.log(box3.offsetLeft,box3.offsetTop)