js e.offsetX 和 e.offsetY

最新推荐文章于 2022-04-26 21:27:50 发布

JDDDDDDyaya

最新推荐文章于 2022-04-26 21:27:50 发布

阅读量2.1k

点赞数 2

分类专栏： js 文章标签： js dom event event.offsetX event.offsetY

本文链接：https://blog.csdn.net/JDDDDDDyaya/article/details/109553245

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetY

e.offsetX 与 e.offsetY 下相对与事件源的距离，也就是距离e.target的距离，大家看下面例子,给出几张截图。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            ul {
                width: 300px;
                height: 200px;
                background: #f40;
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li {
                height: 30px;
                border-bottom: 1px solid #ccc;
                list-style: none;
            }
        </style>
    </head>
    <body>
        <!--  -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            // e.offsetX -> 相对于e.target的距离
            let ul = document.getElementsByTagName('ul')[0]
            ul.onclick = (e) => {
                console.log(e.offsetX, e.offsetY)
            }
        </script>
    </body>
</html>

在这里插入图片描述
因为这个的 事件源就是ul元素本身 ，点击事件就是在ul上面触发的。所以offsetX 和 offsetY是相对于ul的。

在这里插入图片描述
这个的offsetX 和 offsetY是相对于 2这个li！因为存在事件冒泡，点击事件是在2这个li上面触发的，e.target是2这个li，事件源是2这个li，e.offsetX 和 e.offsetY 就是相对于2这个li的距离

在这里插入图片描述
同理。这个的offsetX 和 offsetY是相对于 3这个li！因为存在事件冒泡，点击事件是在3这个li上面触发的，e.target是3这个li，事件源是3这个li，e.offsetX 和 e.offsetY 就是相对于3这个li的距离

JDDDDDDyaya

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js e.offsetX 和 e.offsetY

本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetYe.offsetX 与 e.offsetY 下相对与事件源的距离，也就是e.target，大家看下面例子,给出几张截图。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name
复制链接

扫一扫