获取鼠标在盒子中的坐标

最新推荐文章于 2024-08-19 15:50:15 发布

cnkeysky

最新推荐文章于 2024-08-19 15:50:15 发布

阅读量385

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/cnkeysky/article/details/86745782

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>HelloWorld</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-top: 200px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
<div></div>
<br><br>
X轴:<input type="text">&nbsp;&nbsp;
Y轴:<input type="text">
<script>
    let div = document.querySelector("div");
    let inputs = document.querySelectorAll("input");
    let x = inputs[0];
    let y = inputs[1];
    div.onmousemove = function (ev) {
        ev = ev || window.event;
        x.value = ev.pageX - this.offsetLeft;
        y.value = ev.pageY - this.offsetTop;
    };
</script>
</body>
</html>