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

  • A+
所属分类:html/HTML5

clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考。
Chrome下(测试版本为51.0.2704.106 ):
clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

由上图可见题目中的6种属性可分为三大类:

1.鼠标指针相对于屏幕的坐标:screenX/Y

2.相对于页面且不考虑滚动条是否滚动:clientX/Y,X/Y

3.相对于页面且考虑滚动条:pageX/Y,layerX/Y,offsetX/Y

下面着重讨论2,3。

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

红色对应上文的2类。div3设置了50px的border,可以看到offsetX的数值未包含左边框的50px。下面看一个行内块的:

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

可见offsetX/Y为鼠标指针相对于当前元素(块级或行内块)且不包含边框的坐标,行内元素则无效(返回父级的坐标)。(51版本的chrome下)

其他浏览器的情况怎么样呢?

 

火狐下(测试版本为47.0.1):

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

47版本的火狐不支持x/y,其他表现与51版本的chrome相同。

 

Safari(测试版本为5.1.7)下:

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

Safari(5.1.7)下offsetX/Y为鼠标指针相对于当前元素(块级或行内块)且包含边框的坐标。

 

IE11

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

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

IE11下layerX/Y未包括滚动条距离;pageX/Y与clientX/Y精确到了小数。offsetY出现小数大概是因为dddd的line-height设置为45px。

 

另:Opera(版本38.0.2220.41)表现与chrome一致。

 

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

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

pageX/Y被划到了jq里:

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

没找到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>

 

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
青青子衿

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: