转载：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. VisualBox会造成VPN连接不上问题

    今天连接VPN查找点资料,但是怎么也连接不上,一直出现651错误,开始以为是服务器配置原因,重新配置后发现问题依旧,后查找相关资料,发现有提到VisualPC, 感觉VisualBox跟VisualP ...

  2. URL参数带中文，后台接收乱码解决方案

    1.前台中文参数用encodeURIComponent()进行编码,如: var textName= encodeURIComponent(name); 2.对整个URL用encodeURI()进行编 ...

  3. lab 1实验报告

    练习1:理解通过make生成执行文件的过程. 1.操作系统镜像文件ucore.img是如何一步一步生成的? 生成 bin/kern 部分 生成 init.o 生成 readline.o 生成 stdi ...

  4. Prime Land

    http://poj.org/problem?id=1365 题意:给定一个数字n的拆分形式,然后让你求解n-1的值: 解析:直接爆搞 // File Name: poj1365.cpp // Aut ...

  5. Jquery zTree的使用

    <%@ page language="java" pageEncoding="utf-8"%><%@taglib prefix="s ...

  6. lua 学习笔记（一）

    lua 中的方法: 1. type("test"): 返回数据类型 2.#"zhangsan": 返回字符串的长度 3.string.gsub("字符 ...

  7. Android多语言支持以及各国语言Values文件夹命名规则

    创建好的项目工程由于需求 需要做多国语言的支持  下面介绍怎么快捷的创建文件夹 建好一个android 的项目后,默认的res下面 有layout.values.drawable等目录 这些都是程序默 ...

  8. AWS SQS DOC AND RUBY DEMO

    # Amazon SQS 搜集整理aws sqs 的文档以及使用Ruby demo ## Amazon Simple Queue Service (SQS) 是一个可伸缩且可靠的消息传递框架,能够使用 ...

  9. 【VBA研究】变量定义的类型和实际赋值类型

    作者:iamlaosong VBA中变量能够先定义后使用,也能够不定义直接使用.假设模块前面加了Option Explicit语句,则变量必须先定义后使用. 只是.实验发现.VBA对变量类型没有进行严 ...

  10. Java中字符流与字节流的区别

    字符流处理的单元为2个字节的Unicode字符,分别操作字符.字符数组或字符串,而字节流处理单元为1个字节,操作字节和字节数组.所以字符流是由Java虚拟机将字节转化为2个字节的Unicode字符为单 ...