获取坐标

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html

chrome:

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

ff:

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——无
e.clientX——相对可视区域的坐标
e.x——无

opera:

e.pageX——相对整个页面的坐标
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

safari:(这个和chrome是一样的)

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

IE9:

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离(这个NB轰轰了····=。=)
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE8:

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE7:

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE6:

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

2.PageX和clientX
pageX指鼠标在页面上的位置,以页面左侧为参考点
clientX指可视区域内离左侧的距离,以滚动条滚动到的位置为参考点。各个浏览器相同。
即当有滚动条时clientX  小于  pageX

//ie678不识别pageX
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度,还是直接上图比较清楚

3、screenX
鼠标在屏幕中的位置,指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。
与clientX的区别是clientX是到浏览器的距离。
 例如:当网页缩小,拖动到屏幕中间时,screnX 大于 clientX

4、offsetX和layerX
为了兼容浏览器,layerX是FF、chrome识别,offsetX是除了FF之外。

如果触发元素设置了position,则offsetX等于layerX
如果页面有滚动条,添加滚动的距离。

layerX:FF特有,是相对于父元素的位置,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父

元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF

没有直接替换的属性。

点击li,如果UL设置了position则layerX相对于UL,如果没有则向父级冒泡寻找设置了position的元素,直到根节点body。
offsetX是相对于被点击了的LI元素。

5、e.x
FF不识别
到可视区域的距离,有无滚动条相同,同clientX
opera,chrome和safari的event.x返回值和event.clientX相同
IE8910event.x返回值和event.clientX相同
ie7e.x比e.clientX少2px

时间: 2024-08-02 12:26:22

获取坐标的相关文章

在Google Map中使用地址获取坐标(适用小数据量)

近期手上有个95条数据的地址信息,想把地址转换成经纬度坐标,叠加在底图上.ESRI的online作为专业的云平台,号称提供地理编码服务,可能使用自己的数据制作Web map,于是转成CSV后试了下,结果只有4条记录转换成坐标了,并且都偏离了一个省的范围,基本上不可用.后来想在google earth上试下,使用地址搜索,也不知道是服务器慢,还是什么其他原因,earth的搜索功能简直处于瘫痪状态,打一个地址,10分钟能反应过来,结果基本上是找不到.无奈之下,又试了试google Map,Map上是

百度地图 layer弹出地图 获取坐标

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>layer弹出百度地图</title> <script src="jquery.min.js"></script> <script src="layer/layer.js"><

【HERE地图开发记录】点击地图获取坐标

最近的一个项目需要获取国外较多的POI等信息,GOOGLE在墙内开发实在麻烦,最后选用了N记的HERE地图,在这里不定期记录一些东西. 开发起来麻烦的东西是挺多的,特别是我之前也没接触过地图开发,一来就使用这个少人使用的地图来开发,很多问题基本GOOGLE stackoverflow没搜到有用的,关于API的话,例子还是足够的,不过前面说到由于个人没做过地图开发,找起来挺费劲的,官网的搜索引擎实在不敢恭维. 这篇博文主要记录下怎么样在点击地图某处后获取坐标(本文会用JS API) 1. 首先前面

for循环获取坐标

简单了解一下for循环获取坐标,for循环是js中经常用到,一般情况下,页面上有很多元素的情况下,我们不可能一一的去添加,所以就会用到for循环.今天先简单写一个获取页面元素的坐标,首先先动态给页面添加10个div,并把每个div写一个50*50的宽高给个绝对定位:然后要实现的效果是让每个div都依次的排开:代码如下: 1 <script> 2 window.onload = function (){ 3 var aDiv = document.getElementsByTagName('di

关于获取坐标的一些记录 ——分析淘宝放大镜效果的原理

这是距离相关的 el.offsetTop 表示的是元素el到body的最顶部的距离 : 就是body有多高 就是多高的距离,不会因为缩放窗口而改变. el.offsetWidth 是el元素的看起来的宽度 ,padding也会被算上 el.clientWidth 是获取元素的宽度 这里就额外提一下. 以下是鼠标坐标的: e.movementY 是鼠标点相对于上一次的坐标的移动距离 一般都不准确 e.pageY 是鼠标点相对于body的距离 随着鼠标移动一直变化 以下是网上查到的一些资料 网页可见

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

从json获取坐标,生成地图覆盖物

package com.chencheng.meituan.view; import java.util.ArrayList; import com.baidu.location.BDLocation; import com.baidu.location.BDLocationListener; import com.baidu.location.LocationClient; import com.baidu.location.LocationClientOption; import com.b

百度编辑器(ueditor)@功能之获取坐标

//获取百度编辑器的工具类 var domUtils = UE.dom.domUtils; //获取编辑器的坐标 var $ueditor_offset = $("#ueditor_0").offset(); //创建一个临时dom,用于获取当前光标的坐标 var bk_start = ue.selection.getRange().createBookmark().start; //设置临时dom不隐藏 bk_start.style.display = ''; //计算出x坐标 va

Android dp和px之间转换 及 获取坐标

dp.px.sp转换 1 public class DensityUtil { 2 /** 3 * 将px值转换为dip或dp值,保证尺寸大小不变 4 * 5 * @param pxValue 6 * @param scale 7 * (DisplayMetrics类中属性density) 8 */ 9 public static int px2dip(float pxValue, float scale) { 10 return (int) (pxValue / scale + 0.5f);

JS鼠标获取坐标

<html> <head> <title>获取鼠标的坐标信息</title> </head> <body> <div id="demo">点击这里</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var ev