关于鼠标事件中的event.clientY, event.pageY

最新推荐文章于 2022-07-06 19:17:53 发布

noobles

最新推荐文章于 2022-07-06 19:17:53 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/m0_37837733/article/details/73658458

版权

以上两个属性都表示事件发生时鼠标的Y坐标。

1、clientY翻译过来为客户区坐标Y，表示页面可视区域的Y偏移量(不包括工具栏、搜索栏等)，并且与页面滚动无关，滚动后的clientY值不变。

2、pageY翻译为页面坐标Y，与clientY基本类似，唯一区别在于该值与页面滚动有关，具体来说,pageY = clientY + 页面滚动高度。

测试代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Client coordinates Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="myDiv" style="background-color:red;height:10000px;width:100px">Click me</div>
    <script type="text/javascript">
        var div = document.getElementById("myDiv");
        EventUtil.addHandler(div, "click", function(event){
            event = EventUtil.getEvent(event);
            var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
            var calcPageY = event.clientY + scroll_top;
            console.log("Client coordinates: " + event.clientX + "," + event.clientY);
            console.log("Page coordinates: " + event.pageX + "," + event.pageY);
            console.log("CalcPage coordinates: " + event.clientX + "," + calcPageY);
            console.log("Page scrollTop: " + scroll_top);          
        });
    </script>
</body>
</html>

得到的结果：

可以计算得到pageY的确等于clientY加上页面滚动高度。

PS：在得到页面滚动高度scrollTop的时候出现了浏览器兼容性问题。原本以为除了运行在混杂模式下的IE浏览器之外，页面滚动高度都是<html>元素在Web浏览器视口中的滚动高度document.documentElement.scrollTop，而混杂模式的IE浏览器则为document.body.scrollTop。但我在最新版的Chrome浏览器居然也只能用document.body.scrollTop得到页面滚动高度。查了下资料发现Chrome对document.documentElement.scrollTop的识别会出现误差，Chrome也许是把文档模式当作混杂模式来解析了（未证实，有待考察）。故最好还是写一个得到浏览器滚动高度的通用方案：

var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;

noobles

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
关于鼠标事件中的event.clientY, event.pageY

以上两个属性都表示事件发生时鼠标的Y坐标。1、clientY翻译过来为客户区坐标Y，表示页面可视区域的Y偏移量(不包括工具栏、搜索栏等)，并且与页面滚动无关，滚动后的clientY值不变。2、pageY翻译为页面坐标Y，与clientY基本类似，唯一区别在于该值与页面滚动有关，具体来说,pageY = clientY + 页面滚动高度。测试代码如下： C
复制链接

扫一扫