javascript页面元素坐标-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}

container{

        width: 300px;
        height: 300px;
        margin:100px;
        position: relative;
        border: 2px solid green;
        float: left;
    }
    #box{
        width: 150px;
        height: 150px;
        background: pink;
        position: absolute;
        left: 50px;
        top: 50px;
    }
</style>

</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
<pre>
<script>
var container=document.querySelector("#container");
var box=document.querySelector("#box");
box.onclick=function(ev){
var offstLeft="this offsetLeft 计算点击的坐标点与父节点的距离:"+this.offsetLeft;

    var offsetX="ev.offsetX 计算元素自己的坐标点于宽度之间的距离:"+ev.offsetX;

    /*我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中的水平和垂直坐标。*/
    var clientX="ev.clientX 计算点击的元素与浏览器之间的距离:"+ev.clientX;

    /*通过event事件对象的screenX/screenY属性，可以获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的坐标信息。*/
    var screenX="ev.screenX  计算点击的元素与屏幕之间的距离:"+ev.screenX;

    /*通过事件对象的pageX/pageY属性可以获得鼠标事件发生时鼠标光标相对于整个文档元素的坐标位置（包含滚动）。
    在页面没有滚动的情况下，通常pageX/pageY的值与clientX/clientY的值相等。*/
    var pageX="ev.pageX 计算点击的元素与浏览器之间的距离（包含滚动）"+ev.pageX;
    console.log(offstLeft+".."+offsetX+".."+clientX+".."+screenX);
}

</script>
</pre>