js点击事件的不同坐标点的获取

最新推荐文章于 2024-04-30 16:57:21 发布

要努力奋斗鸭

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量832

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52512511/article/details/131522725

版权

1.相对于你点击的元素来说

语法：事件对象.offsetX 和事件对象.offsetY

点击的位置以被点击的元素作为参考系

2.相对于浏览器的可视窗口区域来说

语法：事件对象.clientX 和事件对象.clientY

点击的位置以窗口可视区域为参考系

3.相对于页面来说

语法：事件对象.pageX 和事件对象.pageY

点击的位置以页面为参考系

运行代码自行理解：

<!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>
</head>
<style>
    div {
        width: 300px;
        height: 300px;
        background-color: rebeccapurple;
        color: wheat;
        margin: 700px auto;
    }
</style>

<body>
    <div>我的横坐标x:,我的纵坐标y:</div>
    <script>
        // 点击事件光标坐标点的获取
        // == 事件对象中有点击的时候 鼠标的坐标
        // == 坐标取决于你用哪个坐标系

        // 1 相对于你点击的元素来说
        // 语法：事件对象.offsetX 和 事件对象.offsetY
        // == 是点击的位置以被点击的元素作为参考系

        // 2 相对于浏览器的可视窗口区域来说
        // 语法：事件对象.clientX 和 事件对象.clientY
        // == 是点击的位置以窗口可视区域为参考系

        // 3 相对于页面来说
        // 语法：事件对象.pageX 和 事件对象.pageX
        // == 是点击的位置以页面的为参考系

        var oDiv = document.querySelector('div')
        //1 相对于你点击的元素来说
        oDiv.onclick = function (e) {
            console.log(e.offsetX)
            console.log(e.offsetY)
            // 渲染函数 
            oDiv.innerHTML = '相对于我点击的这个元素来讲我的横坐标x:' + e.offsetX + ',我的纵坐标y:' + e.offsetY
        }

         // 2 相对于浏览器的可视窗口区域来说
        // oDiv.onclick = function (e) {
        //     console.log(e.clientX)
        //     console.log(e.clientY)
        //     // 渲染函数 
        //     oDiv.innerHTML = '相对于浏览器可视窗口来讲我的横坐标x:' + e.clientX + ',我的纵坐标y:' + e.clientY
        // }

        
        // 3 相对于页面来说
        // oDiv.onclick = function (e) {
        //     console.log(e.pageX)
        //     console.log(e.pageY)
        //     // 渲染函数 
        //     oDiv.innerHTML = '相对于页面来讲我的横坐标x:' + e.pageX + ',我的纵坐标y:' + e.pageY
        // }
    </script>
</body>

</html>

要努力奋斗鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js点击事件的不同坐标点的获取

语法：事件对象.offsetX 和事件对象.offsetY。语法：事件对象.clientX 和事件对象.clientY。语法：事件对象.pageX 和事件对象.pageY。点击的位置以窗口可视区域为参考系。点击的位置以被点击的元素作为参考系。2.相对于浏览器的可视窗口区域来说。1.相对于你点击的元素来说。点击的位置以页面为参考系。
复制链接

扫一扫