原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种
- event.clientX/Y
- event.pageX/Y
- event.offsetX/Y
- event.layerX/Y
- event.screenX/Y
clientX/Y:
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变
兼容性：所有浏览器均支持
pageX/Y:
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
设置<body style="width:2000px;height:200px;">让页面滚动，发现clientX与pageX的值不一样
兼容性：除IE6/7/8不支持外，其余浏览器均支持
offsetX/Y:
offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y:
layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y:
screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变
兼容性：所有浏览器均支持
/*我测试的clientX ，pageX代码*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#wrap{
margin:30px auto;
width:500px;
height:200px;
border:1px solid #ccc;
text-align: center;
overflow: scroll;
}
#wrap p{
display: block;
height:400px;
}
</style>
</head>
<body style="height:2000px; width:20000px">
<div id="wrap">
<p>测试pageX和clientX的区别</p>
</div>
<script>
window.onload=function(){
var oDiv = document.getElementById('wrap');
oDiv.onclick = function(e){
e = e || window.event;
console.log('e.clientX:'+e.clientX);
console.log('e.pageX:'+e.pageX);
} }
</script>
</body>
</html>
原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y的更多相关文章
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
- JS 获取鼠标坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- 现代浏览器原生js获取id号方法
<div id="tests" class="a b c" style="color:#f00">123</div> ...
- 多兼容的JS获取鼠标坐标
//第一.相对于屏幕 function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':sc ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
随机推荐
- 第一册：lesson seventy nine.
原文: Carol's shopping list. What are you doing Carol? I'm making a shopping list Tom. What do we need ...
- linux下定时执行任务的方法
linux下定时执行任务的方法 在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINUX ...
- 深度解析XML的结构与类映射
XML概述 可扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自 ...
- 我是如何解决java.security.cert.CertPathValidatorException异常的
目录 问题来了 问题分析 解决问题 重新安装服务器端证书 日志带来曙光 刨根到底 总结 附录 tomcat的SSL配置 服务器端证书配置 Keytool命令常用参数 问题来了 昨天,我还在我的工位上愉 ...
- Java基础IO流（五）RandomAccessFile
RandomAccessFile java提供的对文件内容的访问,既可以读文件也可以写文件.RandomAccessFile支持随机访问文件,可以访问文件的任意位置 (1)java文件模型: 在 ...
- 2018-11-09 VS Code英汉词典插件v0.0.4-驼峰下划线命名
首先, 在两天时间内安装数破百, 多谢支持. VS Code插件市场地址: 英汉词典 - Visual Studio Marketplace 开源库地址同前文: Visual Studio Code插 ...
- 2018-10-10 在浏览器插件中读取JSON资源文件
续前文: 浏览器插件实现GitHub代码翻译原型演示 此改进只为演示: 词典数据提取到json文件 · program-in-chinese/webextension_github_code_tran ...
- mysql数据库表操作-表的主键索引和普通索引
数据库索引就象书的目录一样,如果在字段上建立了索引,那么以索引列为查询条件时可以加快查询数据的速度.查询数据库,按主键查询是最快的,每个表只能有一个主键列,但是可以有多个普通索引列,主键列要求列的所有 ...
- iOS ----------字符串处理
//一.NSString/*----------------创建字符串的方法----------------*/ //1.创建常量字符串.NSString *astring = @"This ...
- Glide图片加载框架小bug
如上一段加载图片的代码,本身是没问题的,后来测试发现有情况不显示url对应的图片,而一直显示加载超时的图片 修改如下: 将with()方法的上下文context改为图片的imageView.getCo ...