layerX && layerY
转载:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX
UIEvent.layerX
非标准
这个属性是非标准的属性,并且也没有那个标准说要使用它。
如果你要使用它,请不要使用在你的Web产品上。那会不对一些用户起作用的。在不同的浏览器上的实现由许多的兼容性问题。
而且,这个属性的行为将来还可能改变。
这个属性会返回这个事件相对于它相应的层的横坐标。
Syntax
var xpos = event.layerX
这里有一段代码,提供给大家用于理解这个属性
Example
<html>
<head>
<title>pageX\pageY & layerX\layerY example</title> <script type="text/javascript"> function showCoords(evt){
var form = document.forms.form_coords;
var parent_id = evt.target.parentNode.id;
form.parentId.value = parent_id;
form.pageXCoords.value = evt.pageX;
form.pageYCoords.value = evt.pageY;
form.layerXCoords.value = evt.layerX;
form.layerYCoords.value = evt.layerY;
}
</script> <style type="text/css"> #d1 {
border: solid blue 1px;
padding: 20px;
} #d2 {
position: absolute;
top: 180px;
left: 80%;
right:auto;
width: 40%;
border: solid blue 1px;
padding: 20px;
} #d3 {
position: absolute;
top: 240px;
left: 20%;
width: 50%;
border: solid blue 1px;
padding: 10px;
} </style>
</head> <body onmousedown="showCoords(event)"> <p>To display the mouse coordinates please click anywhere on the page.</p> <div id="d1">
<span>This is an un-positioned div so clicking it will return
layerX/layerY values almost the same as pageX/PageY values.</span>
</div> <div id="d2"> <span>This is a positioned div so clicking it will return layerX/layerY
values that are relative to the top-left corner of this positioned
element. Note the pageX\pageY properties still return the
absolute position in the document, including page scrolling.</span> <span>Make the page scroll more! This is a positioned div so clicking it
will return layerX/layerY values that are relative to the top-left
corner of this positioned element. Note the pageX\pageY properties still
return the absolute position in the document, including page
scrolling.</span> </div> <div id="d3">
<form name="form_coords" id="form1">
Parent Element id: <input type="text" name="parentId" size="7" /><br />
pageX:<input type="text" name="pageXCoords" size="7" />
pageY:<input type="text" name="pageYCoords" size="7" /><br />
layerX:<input type="text" name="layerXCoords" size="7" />
layerY:<input type="text" name="layerYCoords" size="7" />
</form>
</div> </body>
</html>
layerX && layerY的更多相关文章
- 页面元素坐标和偏移(clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等)相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- jQuery中 pageX,clientX,offsetX,layerX的区别
一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...
- pageX, clientX ,screenX, offsetX, layerX, ,x的区别
事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY ...
- pageX,clientX,offsetX,layerX的区别
pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...
- layerX offsetX pageX
offsetX/offsetY:相对于当前元素的位移x/y:相对于当前座标系的位移,但是IE常常搞错当前座标系layerX/layerY:相对于当前座标系的位移pageX/pageY:相对于网页的位移 ...
- pageX,clientX,offsetX,layerX的那些事
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...
- 关于js的回调函数的一点看法
算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...
- jQuery的事件模型
前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...
- Html定位精要
Html定位基础 Html的布局是文档流模型,块元素独占一行,内联元素并列一行. 相对定位 position: relative 相对于自己定位 不脱离文档流,元素原有位置被保留 绝对定位 posit ...
随机推荐
- POJ 1579 Function Run Fun
简单动态规划,详细代码网上有!
- 大家AK杯 灰天飞雁NOIP模拟赛题解/数据/标程
数据 http://files.cnblogs.com/htfy/data.zip 简要题解 桌球碰撞 纯模拟,注意一开始就在袋口和v=0的情况.v和坐标可以是小数.为保险起见最好用extended/ ...
- What's the difference between all the Selection Segues
relationship -A "relationship" segue is the segue between a container view controller and ...
- mac下apache启动关闭操作
1.一般的命令如下: 2.但是这种方法在mac上有的时候不生效 3.根据上面的提示使用下面的方法,可以生效,mac上很多应用都可以采用这种方式启动.关闭应用 sudo launchctl load / ...
- 常用的windowd属性和对象
window.location.href="" 指向一个定向的url并提交数据过去 window.location.reload() 强制刷新当前 ...
- MINA之心跳协议运用
转自:http://my.oschina.net/yjwxh/blog/174633 摘要 心跳协议,对基于CS模式的系统开发来说是一种比较常见与有效的连接检测方式,最近在用MINA框架,原本自己写了 ...
- 如何在Windows中打开多个Windows Media Player
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在Windows中打开多个Windows Media Player.
- 【面试虐菜】—— Oracle知识整理《DBA的思想天空》
Inventory Oracle安装工具OUI用来管理Oracle安装目录的 Oracle的参数文件,启动后按照下面的顺序读取参数文件,如果读取失败,启动数据库 失败: 1 $ORACLE_HO ...
- MySQL启动和关闭服务命令
MySQL启动和关闭服务命令 1.启动服务命令 net start mysql 2.关闭服务命令 net stop mysql
- Linux下用来获取各种系统信息的C++类
#include <vector> #include "sys/config.h" SYS_NAMESPACE_BEGIN /*** * 用来获取系统.内核和进程的各类 ...