转载：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. rcp（插件开发）The type XXX cannot be resolved. It is indirectly referenced from required .class files解决办法

    如果你在使用插件开发时遇到这个问题: The type org.eclipse.core.resources.IFile cannot be resolved. It is indirectly re ...

  2. Powerdesigner设置name与code不同时变化

    Tools-General Options-Dialog Name to Code mirroring去掉对勾

  3. JS跨域笔记

    什么是跨域,跨域是指不同域之间相互访问,只要协议.域名.端口有任何一个不同,都被当作是不同的域. 对于端口和协议的不同,只能通过后台来解决,前台是无能为力的. 受浏览器同源策略的限制,本域的js不能操 ...

  4. Java 随机生成中文姓名，手机号，邮编，住址

    package lovo; import java.util.HashMap; import java.util.Map; /** * 随机生成中文姓名,性别,Email,手机号,住址 * @auth ...

  5. 使用ajax代替iframe

    相信大多数程序员都跟iframe打过交道,iframe简单,好用.在我用的过程中比较苦逼的是关于iframe高度的设置. 由于子页面内容不确定,页面高度也不确定.于是开始网上的各种搜索,一般有两种:一 ...

  6. Spring Batch Framework– introduction chapter(下)

    Extract,Transform, and load(ETL) Briefly stated, ETL is a process in the database anddata-warehousin ...

  7. Highcharts简介

    最近要做一个油田油压或温度数据的监控软件,数据会秒级写到数据库中,界面上需要动态展示数据跟随时间变化. 在网上找了很多js插件,希望能够即时高效的展示数据,最终确定了使用Highcharts插件. H ...

  8. linux 修改文件时间

    1.ls -l *.sh 2.touch -d "10/13/2013" *.sh [我想把所以的.sh文件修改到三个月前(2013年10月13)的时间.]3.ls -l *.sh ...

  9. Android5.0之CoordinatorLayout的使用

    CoordinatorLayout,中文译作协调者布局,光听这名字你可能很难判断出协调者布局有什么特点,那么我们来看看下面一张图片: 由于CSDN对图片大小的要求,我只能录制一个快速播放的动画,请大家 ...

  10. arcgis 获得路径和环境变量信息

    import arcpy import sysimport osimport string reload(sys) sys.setdefaultencoding("utf8")sc ...