标签：top selector off 元素 cto query 还需 OLE port
鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的clientX和clientY属性中，所有浏览器都支持这两个属性。
我们知道了这个位置信息我们可以做些什么了？举个例子，有时候我们需要获取鼠标在某一个元素中的相对位置，做一些事情，比如自定义拖动条。
案例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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两个属性代表鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。在没有滚动的情况下，clientX和cilentY与pageX和pageY是相等的。在IE8及更早版本中是没有这个两个属性的，但是我们可以根据滚动信息和客户区坐标位置信息计算出来，下面给出兼容写法：
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); }
鼠标事件发生的时候，不仅仅会有相对于浏览器的窗口，还有一个相对于整个电脑屏幕的位置。通过事件对象中的screenX和screenY属性就可以获得相关的属性信息。
看一段代码：
var div = document.querySelector(‘.myDiv‘); div.onclick = function (e) { console.log(e.screenX); console.log(e.screenY); }
这样就获取了相对于电脑屏幕的位置信息。
一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
标签：top selector off 元素 cto query 还需 OLE port
原文地址：https://www.cnblogs.com/jsydb/p/12344622.html
