原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】
2016-04-11 16:15
579 查看
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种
event.clientX/Yevent.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y
clientX/Y:
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持
pageX/Y:
pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变兼容性:除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获取到的是触发点相对显示器屏幕左上角的距离,不随页面滚动而改变兼容性:所有浏览器均支持
相关文章推荐
- form 转json最佳示例
- 获取时间差:发表评论或者其他内容时显示时间为几秒前,几小时前
- JS需要注意的细节和一些基础知识
- 4.JSON:JavaScript对象表示法
- js创建jsonArray传输至后台及后台全面解析
- jstl--c:choose标签
- javascript HTML5 Canvas实现圆盘抽奖功能
- JSTL中forEach标签中varStatus属性名列表
- js图片从左到右滚动循环
- javaScript动态展示数字
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
- C# 使用Newtonsoft.Json.dll 格式化显示Json串
- 【js】:js中的确认框,提示框和确认框的使用
- 去掉静态文件后面的jsessionid
- 用phantomjs进行web界面自动化测试的几个注意点
- JavaScript
- js处理iframe中子页面与父页面
- Javascript异步编程的4种方法
- JavaScript 闭包
- JSP自定义标签