一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
2021-06-04 01:03
标签：top selector off 元素 cto query 还需 OLE port 鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。 我们知道了这个位置信息我们可以做些什么了？举个例子，有时候我们需要获取鼠标在某一个元素中的相对位置，做一些事情，比如自定义拖动条。 案例代码如下： 像这样子就实现了一个简易的拖动条（还需要优化，但是思路就是上面展现的思路）。 pageX和pageY两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的。在IE8及更早版本中是没有这个两个属性的，但是我们可以根据滚动信息和客户区坐标位置信息计算出来，下面给出兼容写法： 鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。通过事件对象中的screenX和screenY属性就可以获得相关的属性信息。 看一段代码： 这样就获取了相对于电脑屏幕的位置信息。 一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY 标签：top selector off 元素 cto query 还需 OLE port 原文地址：https://www.cnblogs.com/jsydb/p/12344622.html一. 客户区坐标位置（clientX，clientY）
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Documenttitle>
style>
* {
margin: 0;
padding: 0;
}
div.container {
position: relative;
height: 20px;
width: 400px;
border-radius: 20px;
margin: 100px auto;
background-color: red;
}
div.scrollbar {
position: absolute;
height: 40px;
left: -20px;
top: -10px;
width: 40px;
border-radius: 50%;
background-color: green;
}
style>
head>
body>
div class="container">
div class="scrollbar">div>
div>
script>
var container = document.querySelector(‘.container‘);
var scrollbar = document.querySelector(‘.scrollbar‘);
// 计算容器的offsetLeft
var _left = container.offsetLeft;
// 边界判断
var leftMin = -scrollbar.clientWidth / 2;
var leftMax = container.clientWidth - scrollbar.clientWidth / 2;
scrollbar.onmousedown = function () {
document.onmousemove = function (e) {
// 得到鼠标想对于容器container的左侧坐标
var left = e.clientX - _left;
left = Math.min(Math.max(leftMin, left), leftMax);
scrollbar.style.left = left + ‘px‘;
}
document.onmouseup = function () {
this.onmousemove = null;
}
}
script>
body>
html>
二. 页面坐标位置（pageX，pageY）
var getPage = function (e) {
var clientx = e.clientX;
var clienty = e.clientY;
var pagex = e.pageX;
var pagey = e.pageY;
if (!pagex) {
pagex = clientx + (document.documentElement.scrollLeft || document.body.scrollLeft);
}
if (!pagey) {
pagey = clienty + (document.documentElement.scrollTop || document.body.scrollTop);
}
return {
pageX: pagex,
pageY: pagey
}
}
var div = document.querySelector(‘.myDiv‘);
div.onclick = function (e) {
getPage(e);
}
三. 屏幕坐标位置
var div = document.querySelector(‘.myDiv‘);
div.onclick = function (e) {
console.log(e.screenX);
console.log(e.screenY);
}
文章标题：一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
文章链接：http://soscw.com/index.php/essay/90190.html