转载：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的更多相关文章

  1. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  2. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

  3. pageX, clientX ,screenX, offsetX, layerX, ,x的区别

    事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY ...

  4. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  5. layerX offsetX pageX

    offsetX/offsetY:相对于当前元素的位移x/y:相对于当前座标系的位移,但是IE常常搞错当前座标系layerX/layerY:相对于当前座标系的位移pageX/pageY:相对于网页的位移 ...

  6. pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

  7. 关于js的回调函数的一点看法

    算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...

  8. jQuery的事件模型

    前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...

  9. Html定位精要

    Html定位基础 Html的布局是文档流模型,块元素独占一行,内联元素并列一行. 相对定位 position: relative 相对于自己定位 不脱离文档流,元素原有位置被保留 绝对定位 posit ...

随机推荐

  1. Centos System Info

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  2. python 探索（四） Python CookBook 系统管理

    看CookBook就像看小说,挑感兴趣的先学习. 所以继<文本>之后,开始<系统管理>. 同样,请善用目录. 发现一个cookbook:好地址 生成随机密码 from rand ...

  3. mac下firefox复制粘贴失效解决办法

    现象:复制粘贴只能在firefox上操作,也就是其他应用内的内容无法复制到firefox,firefox的内容也无法复制其他应用,但是firefox自己的内容可以复制本身(比如各个tab页之间复制) ...

  4. Java- 类型转换

    有两个方法: Integer.valueOf 和 String.valueOf 注: 字串转成 Double, Float, Long 的方法大同小异.

  5. HP QC(Quality Center)在Windows 7 IE8 IE9下不能工作解决方案

    HP QC(Quantity Center)是一款不错的测试管理工具,公司的操作系统Windows 7登录到QC Server的Quality Center和Addin页面,客户端组件不能正常下载,从 ...

  6. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

  7. Android之AlarmManager(全局定时器/闹钟）指定时长或以周期形式执行某项操作

    1.AlarmManager,顾名思义,就是“提醒”,是Android中常用的一种系统级别的提示服务,可以实现从指定时间开始,以一个固定的间隔时间执行某项操作,所以常常与广播(Broadcast)连用 ...

  8. SQL Server解决死锁问题

    用以下语句查询所有死锁的进程号和表名: SELECT  request_session_id spid,  OBJECT_NAME(   resource_associated_entity_id   ...

  9. linux和windows中设置环境变量经常使用命令

    Linux和Windows下查看环境变量方法 一.查看全部环境变量的名称和值: Linux下:export Windows下:set 二.依据名称查该环境变量的值: Linux下:echo $环境变量 ...

  10. careercup-树与图 4.7

    4.7 设计并实现一个算法,找出二叉树中某两个结点的第一个共同祖先.不得将额外的结点储存在另外的数据结构中.注意:这不一定是二叉查找树. 解答 本题的关键应当是在Avoid storing addit ...