layerX/layerY与offsetX/offsetY区别

之前说过两种获取事件对象的方法

下面说一下,事件对象(事件源)获取位置的方法:

        layerX/layerY与offsetX/offsetY获取事件源于鼠标作用的位置信息

IE: offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置 offsetY 

FF: layerX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置 layerY

下面简单代码实现事件源位置内容的获取:

鼠标.事件=function(e){
ev=window.event||e;//为了兼容低版本ie和流行版本的符合w3c规则的浏览器前者是低版本ie,后者是w3c的大众浏览器
var left=ev.layerX||ev.offsetX;
var top=ev.layerY||ev.offsetY;//兼容两种方式,前者w3c的合法化,后者是低版本ie获取距离事件对象(作用在事件源)顶部的距离(x是左端距离)
}

注意:上述的是事件对象的位置获取,下面介绍相当于浏览器的位置获取

clientX 当鼠标事件发生的时候,鼠标相对于浏览器左侧的距离 

clientY 当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏flutter开发者

[Flutter Widget] Wrap

在前面的文章中我们讲了很多Widget的用法,包括简单的Widget和复杂一点的布局,其实归根到底都是为了解决我们在界面布局上的需求,最近很多童鞋私信我Flut...

6625
来自专栏owent

JQuery扩展插件--提示信息

https://github.com/owt5008137/SimpleMetro

541
来自专栏我分享我快乐

网站布局中的三种定位级

第1种定位级:块对象默认定位级 此定位级特点:块对象默认情况下跟据其出现顺序上下安排布局 下图中是用块对象默认定位级排列的一个大容器包着三个小容器: ? 第2种...

36214
来自专栏程序员宝库

手机端页面在项目中遇到的一些问题及解决办法

首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是:

2753
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

2193
来自专栏hbbliyong

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件  photo-sphere-viewer.js  ————————————————————————————————————...

6189
来自专栏从零开始学 Web 前端

从零开始学 Web 之 BOM(二)定时器

多次点击“摇起来”按钮的时候,timeId 的值会有多个,而停止的时候,只会清理最后一个值,其他的值对应的定时器没有清理。

1071
来自专栏HTML5学堂

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还...

3826
来自专栏腾讯Bugly的专栏

iOS UITableView左滑操作功能的实现(iOS8-11)

本文主要是介绍下iOS 11系统及iOS 11之前的系统在实现左滑操作功能上的区别,及如何自定义左滑的标题颜色、字体大小。 一 左滑操作功能实现 1、如果左滑...

3208
来自专栏老马寒门IT

05-老马jQuery教程-动画

jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实现很多...

2140

扫码关注云+社区

领取腾讯云代金券