clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

最新推荐文章于 2023-07-05 15:40:48 发布

小爱猴

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量251

点赞数

分类专栏：前端开发文章标签： clientX pageX offsetX

本文链接：https://blog.csdn.net/weixin_41644419/article/details/80238175

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下面是w3c关于各属性的解释：

　　pageX/Y被划到了jq里：

　　没找到layerX/Y的官方文档。

　　总结：

　　推荐使用：

　　screenX/Y：鼠标位置相对于屏幕的坐标

　　pageX/Y：相对于文档边缘（包含滚动条距离）

　　clientX/Y：相对于当前页面且不包含滚动条距离

　　offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。

　　其他：

　　X/Y：与clientX/Y相同，firefox不支持

　　layerX/Y：除IE外与pageX/Y相同，IE11下与clientX/Y相同。非官方属性。

　　测试代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .div {
            text-align: center;
            font-size: 24px;
            height: 300px;
            width: 1300px;
            line-height: 300px;
            color: yellow;
        }
 
        #d1 {
            background-color: #FF3B2F;
        }
 
        #d2 {
            background-color: #4CDA64;
        }
 
        #d3 {
            background-color: #007AFF;
            border: 50px solid #004400;
            width: 500px;
            display: inline-block; }
        #d3-2{
            background-color: #FF2C55;
            width: 500px;
            border: 10px solid #019EE4;
            display: inline-block;
        }
 
        #d4 {
            position: absolute;
            background-color: #FFCC00;
            height: 340px;
            width: 120px;
            top: 0;
            bottom: 0;
            left: 50px;
            margin: auto 0;
            font-family: "arial";
            font-size: 16px;
        }
    </style>
    <script type="text/javascript">
 
        $(function () {
 
            document.onmousemove = function (e) {
                if (e == null) {
                    e = window.event;
                }  var html = "<span style='color:#000'>screenX:" + e.screenX + "</span><br/>";
                html += "<span style='color:#000'>screenY:" + e.screenY + "</span><br/><br/>";
                 
                html += "<span style='color:#f00'>clientX:" + e.clientX + "</span><br/>";
                html += "<span style='color:#f00'>clientY:" + e.clientY + "</span><br/><br/>";
                html += "<span style='color:#f00'>x:" + e.x + "</span><br/>";
                html += "<span style='color:#f00'>y:" + e.y + "</span><br/><br/>";
                 
                html += "<span style='color:#00f'>layerX:" + e.layerX + "</span><br/>";
                html += "<span style='color:#00f'>layerY:" + e.layerY + "</span><br/><br/>";
                html += "<span style='color:#00f'>pageX:" + e.pageX + "</span><br/>";
                html += "<span style='color:#00f'>pageY:" + e.pageY + "</span><br/><br/>";
                 
                html += "<span style='color:#070'>offsetX:" + e.offsetX + "</span><br/>";
                html += "<span style='color:#070'>offsetY:" + e.offsetY + "</span><br/>";
                $("#d4").html(html);
            };
        });
 
    </script>
</head>
<body>
    <div id="d1" class="div">div1 height:300px width:1300px</div>
    <div id="d2" class="div">div2 height:300px width:1300px</div>
    <div id="d3" class="div">div3 height:300px width:500px</div>
    <div id="d3-2" class="div">div3-2 height:300px width:500px <span style="width:50px;height:50px;background:#000;display: inline-block;border: 5px solid #fff;line-height: 45px;">dddd</span></div>
    <div id="d4"></div>
</body>
</html>

小爱猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

下面是w3c关于各属性的解释：　　pageX/Y被划到了jq里：　　没找到layerX/Y的官方文档。　　总结：　　推荐使用：　　screenX/Y：鼠标位置相对于屏幕的坐标　　pageX/Y：相对于文档边缘（包含滚动条距离）　　clientX/Y：相对于当前页面且不包含滚动条距离　　offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。　　其他：　　X/Y：与cli...
复制链接

扫一扫