首页 > 代码库 > js事件对象坐标
js事件对象坐标
js事件对象坐标---贴上代码
<body style="position:relative;width:100%;height:100%;padding:15px;margin:20px;"> <div style="position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px;margin:9px;background:#ddd;" onclick="xy(event)"> </div></body>
/********************************* event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。 event.offsetX、event.offsetY 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。(本地测试所有浏览器都有这个属性) event.layerX, event.layerY 鼠标相对于事件源元素(srcElement)的X,Y坐标,在Firefox下使用 event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性 *******************************/ function xy(event) { var event = event ? event : window.event; console.log("clientX:" + event.clientX + "," + "clientY:" + event.clientY); console.log("pageX:" + event.pageX + "," + "pageY:" + event.pageY); console.log("x:" + event.x + "," + "y:" + event.y); console.log("offsetX:" + event.offsetX + "," + "offsetY:" + event.offsetY); console.log("layerX:" + event.layerX + "," + "layerY:" + event.layerY); console.log("screenX:" + event.screenX + "," + "screenY:" + event.screenY); } /***************************** FF:clientX,pageX 相对于浏览器窗口可视区域(浏览器左边加上自身的padding-left)注:x在FF中无效 Chrome:clientX,pageX,x 相对于浏览器窗口可视区域(浏览器左边加上自身的padding-left) Opera:clientX,pageX,x 相对于浏览器窗口可视区域(浏览器左边加上自身的padding-left) IE7:clientX相对于浏览器窗口可视区域(浏览器左边加上自身的padding-left,有小小的偏差),pageX无效,clientX多了两个像素,x比clientX小,基本上等于去掉margin个padding之后的值 IE8:clientX相对于浏览器窗口可视区域(浏览器左边加上自身的padding-left,有小小的偏差),pageX无效,x比clientX小,基本上等于去掉margin个padding之后的值 IE9以上:clientX,pageX,x 相对于浏览器窗口可视区域(浏览器左边加上自身的padding-left),x浏览器左边加上自身的margin-left clientX全部浏览器支持,IE7,8有小小偏差 pageX IE7,8不支持 x FF不支持 IE8以下不支持offsetX属性,其他都ok offsetX全部浏览器支持 screenX全部浏览器支持 *****************************/
参考文章 : http://blog.sina.com.cn/s/blog_780a94270101kdgo.html http://www.2cto.com/kf/201409/333401.html
js事件对象坐标
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。