一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
一. 客户区坐标位置（clientX，clientY）
鼠标事件都是在浏览器视口中的特定位置发生的。这个位置信息保存在事件对象的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）
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的更多相关文章
- 一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）
滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...
- 一文看懂js中元素的客户区大小（clientWidth,clientHeight）
元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- 一文搞懂 js 中的各种 for 循环的不同之处
一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...
- pageX/pageY,screenX/screenY,clientX/clientY的差别
pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...
- 一文看懂JS继承
继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承.在讲继承的实现之前,我们首先来回顾一下什么是继 ...
- 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY
总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...
- 一文读懂JS中的原型和原型链（图解）
讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...
- 一文搞懂js中的typeof用法
基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好 ...
随机推荐
- Nginx配置使用
1.黑色标注的得自己写入到nginx.conf文件中 upstream serverlb { server 127.0.0.1:9999; server 127.0.0.1:8888; } serve ...
- Canal监控Mysql同步到Redis（菜鸟也能搭建）
首先要Canal服务端下载:链接: https://pan.baidu.com/s/1FwEnqPC1mwNXKRwJuMiLdg 密码: r8xf 连接数据库的时候需要给予连接数据库权限:在my.i ...
- 查看linux系统安装的服务
如何查看linux系统安装了哪些服务呢,因不同版本的操作系统可能使用的命令不一样或者有些命令在某些操作系统不可用,现列举一些常用查看命令(基于我的linux版本). 我的操作系统版本如下: 1.ser ...
- java通过jdbc插入中文到mysql显示乱码（问号或者乱码）
对于很多初学者来说,中文字符编码不相同的问题,是一个很烦躁的问题!! 因为很多时候,我们并不知道,到底是哪一层出现了问题? 在这里稍微做个总结~也怕自己今后忘了!! 其实也就三层: 1.前端页面 2. ...
- CentOS 配置国内源
阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软件安装源 第一步 备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repo ...
- nginx负载均衡如何实现
什么是nginx?Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的Web和反向代理服务器,也是一个 IMAP/POP3/SMTP ...
- sqlserver中的数据导到mysql相关
一.在sqlserver中生成数据表脚本,粘贴到记事本中,如下语法要进行替换 1.int IDENTITY (1, 1) NOT NULL——>id int unsigned NOT NULL ...
- Xming+SecureCRT的安装与使用
博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 Xming下载地址:https://xming.en.softonic.com/ 安装完后打开文件位置: 一.Xming ...
- linux下安装glibc-2.14，解决“`GLIBC_2.14' not found”问题
下载安装包:http://ftp.gnu.org/gnu/glibc/ 我下载的是glibc-2.14.1.tar.gz 解压:tar xzf glibc-2.14.1.tar.gz cd glibc ...
- jquery框架概览(一)
参照jQuery 2.0.3版本(http://files.cnblogs.com/files/snoy/jquery-2.0.3.js")来进行的源码分析 从代码的最外层可以看到是一个II ...