转载：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. linux select 与 阻塞( blocking ) 及非阻塞 (non blocking)实现io多路复用的示例

    除了自己实现之外,还有个c语言写的基于事件的开源网络库:libevent http://www.cnblogs.com/Anker/p/3265058.html 最简单的select示例: #incl ...

  2. hdoj 1242 Rescue

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  3. 启动列表的activity

    每学一个知识点就要重新创建一个项目,感觉那样太繁琐了,特别是android studio开发,没创建一个项目都会重新打开一个窗口 所以我就在那想,何不有一个功能列表,点击每一个列表项的时候就跳转到那个 ...

  4. Multipart Upload with HttpClient 4--reference

    by Eugen Paraschiv on May 23, 2014 in HttpClient http://www.baeldung.com/httpclient-multipart-upload ...

  5. 测试浏览器最多能包含Cookie的个数和Cookie中包含的最多内容

    public class CookieTestServlet extends HttpServlet { public void doGet(HttpServletRequest request, H ...

  6. Ubuntu 14.04 忘记用户密码(备忘)

    参考文章地址:www.linuxidc.com/Linux/2013-11/92236.htm 重启电脑 开机就会进入一个Grub引导页面,选择 "Ubuntu 高级选项"之后,按 ...

  7. bootstrap--组件之按钮式下拉菜单

    把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 简单的实现如下 Code<div class="btn-group"& ...

  8. 用 C# 如何判断数据库中是否存在一个值

    选定一个列,比如用户编号列 //欲插入的用户编号string ll_userID="xxxxxxxx"; //查询此编号是否存在SqlCommand mycmd = new Sql ...

  9. 获得服务器硬件信息（CPUID、硬盘号、主板序列号、IP地址等）

    1 // 注意:首先要在项目中添加引用 System.Management using System; using System.Collections.Generic; using System.L ...

  10. 趣拍proguard配置

    # Add project specific ProGuard rules here.# By default, the flags in this file are appended to flag ...