获取鼠标在屏幕坐标时的兼容性问题处理

最新推荐文章于 2024-08-04 16:33:59 发布

勿忘灬无期

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量194

点赞数

文章标签： dom javascript

本文链接：https://blog.csdn.net/F_eve/article/details/111716460

版权

在做一些与鼠标相关的效果时，经常要获取鼠标在浏览器上面的坐标。而不同的浏览器的兼容性是不一样的，这次向大家介绍如何解决这个问题。
获取坐标的步骤：
第一步：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取鼠标在屏幕的坐标的兼容性处理</title>
    <style>
        p {
           height: 2000px; 
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        document.onclick = function(e){
            console.log(e.clientX); //获取鼠标点击时在可视窗口的坐标，X轴。未滚动滑轮时。
            console.log(e.clientY); //获取鼠标点击时在可视窗口的坐标，Y轴。未滚动滑轮时。
        }
    </script>
</body>
</html>

这样我们就能获取鼠标点击时在可视窗口的坐标。但是我们滑动滚轮时，鼠标的坐标范围仍然是没有改变的，这就和我们的目标期望不一样了。为了解决这个问题，我们可以用page来替换client。

<script>
	document.onclick = function(e){
	   //console.log(e.clientX); //获取鼠标点击时在可视窗口的坐标，X轴。未滚动滑轮时。
	   //console.log(e.clientY); //获取鼠标点击时在可视窗口的坐标，Y轴。未滚动滑轮时。
	   console.log(e.pageX); //获取鼠标点击时在页面的坐标，X轴。
	   console.log(e.pageY); //获取鼠标点击时在页面的坐标，Y轴。
	}
</script>

这样鼠标的坐标就能随着滚轮滑动时发生改变，达到了我们想要的效果。但是，并不是所有的浏览器都支持page这个。从IE9以后才支持，为了解决这个问题，需要引出scroll这个方法。获取滚轮滑动时的距离。需要注意的是，event事件对象没有scroll这个方法。
属于window下面的方法，一般情况下window是可以省略的，因此可以直接获取。

<script>
	window.onscroll = function(){
	    scrollTop = document.documentElement.scrollTop;
	    console.log(scrollTop); //滑动滚轮时，可视化窗口向下移动的距离
	}
</script>

这里又涉及到scroll的兼容性问题的处理。解决办法如下：

<script>
	window.onscroll = function(){
		scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		console.log(scrollTop); //滑动滚轮时，可视化窗口向下移动的距离
	}
</script>

这样，就能在不同的浏览器的不同版本获取到鼠标的坐标了。
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取鼠标在屏幕的坐标的兼容性处理</title>
    <style>
        p {
           height: 2000px; 
        }
    </style>
</head>
<body>
    <p></p>
    <script>
        document.onclick = function(e){
            //console.log(e.clientX); //获取鼠标点击时在可视窗口的坐标，X轴。未滚动滑轮时。
            //console.log(e.clientY); //获取鼠标点击时在可视窗口的坐标，Y轴。未滚动滑轮时。
            //console.log(e.pageX); //获取鼠标点击时在页面的坐标，X轴。
            //console.log(e.pageY); //获取鼠标点击时在页面的坐标，Y轴。
            var pageX = e.clientX + getscroll().scrollLeft;
            var pageY = e.clientY + getscroll().scrollTop;
            console.log(pageX);
            console.log(pageY);
        }
        function getscroll(){
            scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                scrollTop : scrollTop,
                scrollLeft : scrollLeft
            }
        }
    </script>
</body>
</html>

勿忘灬无期

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取鼠标在屏幕坐标时的兼容性问题处理

在做一些与鼠标相关的效果时，经常要获取鼠标在浏览器上面的坐标。而不同的浏览器的兼容性是不一样的，这次向大家介绍如何解决这个问题。获取坐标的步骤：第一步：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫