JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

最新推荐文章于 2023-11-19 21:45:31 发布

hangGe0111

最新推荐文章于 2023-11-19 21:45:31 发布

阅读量539

点赞数

分类专栏： html 文章标签： clientX clientY screenX screen

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解；clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性，所以必然是“鼠标事件”发生时候才会有意义；

clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

下面我将结合我的测试代码和结果对上面的话进行解释

这是我写的测试例子的html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 200px;
            height: 100px;
            border: 1px solid #c00;
        }

        input[type="button"] {
            margin: 50px;
            border: none;
            width: 100px;
            height: 50px;
            background: green;
        }
    </style>
</head>

<body>
    <span style="white-space:pre"> </span>
    <div id="div" class="container"></div>
    <span style="white-space:pre"> </span>
    <!--<div id="div1" class="container"></div>
    <span style="white-space:pre">	</span><input type="button" value="test" onclick="test();">-->

    <script>
        document.onmousemove = function (ev) {
            var e = ev || window.event;
            var div = document.getElementById('div');
            div.innerHTML = "clientX: " + e.clientX + ",clientY:" + e.clientY +
                "</br> screenX:" + e.screenX + ",screenY:" + e.screenY;
        }

        /*  function test(ev) {
              var e = ev || window.event;
              var div1 = document.getElementById('div1');
              div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY;
          }*/
    </script>
</body>

</html>

这里我需要解释一下我上面说的“浏览器有效区域”这句话，下图中黑色边框区域就是浏览器的有效区域，而整个图片显示的区域就是 “显示器屏幕区域”