文档章节

layerX/layerY 和 offsetX/layerY

斑驳
 斑驳
发布于 2014/11/09 11:56
字数 329
阅读 134
收藏 0

鼠标相对于引起事件的对象的 X/Y 坐标:

offsetX/offsetY:IE 特有,以引起事件的对象为参考点,从内容区域的左上角计算,如果有 border 可能出现负值。

layerX/layerY: Firefox 特有,以页面 body 为参考点,如果引起事件的对象设置了 position 定位,那么和 IE 一样也以引起事件的对象为参考点,从触发元素盒子模型的 border 的左上角计算。

也就是当触发元素设置了 position 定位后,layerX/layerY 和 offsetX/offsetY 几乎相等,唯一不同就是 Firefox 以 border 为参考点, IE 以内容为参考点

可以拿下面的代码分别在 IE 和 Firefox 下测试一下。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
    var oDiv = document.getElementById("oDiv");
    oDiv.onclick = function(evt) {
        evt = evt || fixEvent(window.event);
        alert("layerX == " + evt.layerX + "\nlayerY == " + evt.layerY);
    }
};

function fixEvent(evt) { // 给 IE 浏览器事件对象添加 layerX 和 layerY 属性,这样后面就可以用相同的名字调用了
    evt.layerX = evt.offsetX;
    evt.layerY = evt.offsetY;
    return evt;
}
</script>
<style type="text/css">
#oDiv {
    width: 200px;
    height: 200px;
    background: blue;
    border: 5px solid red;
    margin: 100px;
    position: relative;  /*设置了 postion 定位,layerX 和 offsetX 几乎相等,就是参考点不同。如果不设置,firefox 将参考 body,而 IE 还是参考该 div。*/
};
</style>
</head>
<body>
<div id="oDiv"><div>
</body>
</html>






本文转载自:http://jquery01.diandian.com/post/2012-01-18/16726221

斑驳
粉丝 12
博文 57
码字总数 9410
作品 0
深圳
高级程序员
私信 提问
pageX,clientX,offsetX,layerX的那些事

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

utopia1985
2013/01/13
0
0
EVENT对象的属性

1、鼠标事件: ·相对于浏览器位置: event.clientX:事件触发时,鼠标指针向对于浏览器页面(客户区)的水平坐标; event.clientY:事件触发时,鼠标指针向对于浏览器页面(客户区)的垂直坐标...

黑魔法
2016/11/24
4
0
javascript event 属性

target String representing the object to which the event was originally sent. (All events) type String representing the event type. (All events) data Returns an array of strings......

答复哈
2010/09/16
0
0
JS和JQ的event对象对比和应用

currentTarget 事件冒泡阶段所在的DOM target, originalTarget原始的DOM 代码测试: 结果分析: 总结: js的event参数中,不管是, , 都是指向第一个触发事件的元素(还没冒泡),而在click事...

前端届的科比
2014/08/11
0
0
前端——关于pageX、clientX、screenX、offsetX、layerX

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前...

fycool
2016/11/24
100
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
19分钟前
1
0
sql注入漏洞,应屏蔽SQL注入攻击

注:SQL注入好比是前端URL传参数请求时参数以SQL 做为参数传入,如 select 1 from dual where 1=1 or 1=1 and 1=2;(类似这样的SQL语句) 防御方法 如果自己编写防注代码,一般是先定义一个函...

颜丽
19分钟前
1
0
装饰者模式

 代理模式与装饰者模式看起来很像,都实现基础对象实现的接口,在其自身对象中都保存着对被代理/被装饰者的对象引用。   先来看看装饰者模式的定义:动态的将责任附加到被装饰者对象上,用...

铁骨铮铮
24分钟前
0
0
我为什么飞行 10000 公里去西班牙参加 KubeCon?

2019 年 5 月 20 日至 23 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCon EU(欧洲场)即将在热情洋溢的巴塞罗那盛装启幕。 作为云计算领...

zhaowei121
42分钟前
0
0
Node.getTextContent() not found 解决办法【不需要调整builder path下面包顺序】

新导入的工程,w3c的getTextContent找不到,response的setCharacterEncoding找不到,网上很多教程都是“调整工程builder path的lib包顺序把jre、tomcat调到上面即可”,但是进入项目的build...

嘿嘿嘿IT
49分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部