js 事件对象常用属性---坐标

最新推荐文章于 2024-06-27 22:37:30 发布

香蕉加奶茶

最新推荐文章于 2024-06-27 22:37:30 发布

阅读量62

点赞数

分类专栏： java script 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42974751/article/details/134346427

版权

java script 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细解释了HTML5中事件对象的常用坐标属性clientX,clientY(在浏览器可视区域内)，pageX,pageY(相对于整个文档)，以及offsetX,offsetY(相对于DOM元素)的区别，包括它们在滚动条影响下的定位特性。

摘要由CSDN通过智能技术生成

事件对象的常用坐标大致有三个：clientX，clientY。pageX，pageY。offsetX,offsetY
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            position: absolute;
            height: 3000px;
        }
        div{
            position: relative;
            top: 100px;
            left:100px;
            
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        document.addEventListener('click',function(e){
            console.log(e);
            //相对于浏览器页面左上角的位置（可视区域）
            console.log('e.clientX:'+e.clientX,'e.clientY:'+e.clientY);
            //整个文档多大它多大，不受可视窗口的影响(比如有滚动条，它还是相对整个页面的最上面)
            console.log('e.pageX:'+e.pageX,'e.pageY:'+e.pageY);
            //相对于dom元素左上角（确定元素内的坐标）
            console.log('e.offsetX:'+e.offsetX,'e.offsetY:'+e.offsetY);
        })
    </script>
</body>
</html>