如何获取鼠标或者某个盒子的相对坐标,一下几种获取方法
在编写JavaScript代码时,经常会需要获得鼠标或者某个盒子的相对坐标,这里我们就简要介绍一下几种获取方法的不同。
关于鼠标坐标
鼠标坐标一般是用event事件获取,其中有以下几个方法:
其中以pageX , pageY方法使用得较多,其他的方法则不太常使用(*标明)。
一张图说明三者的区别:
如图☝
pageX是指光标相对于该网页的水平位置(网页实际大小),以当前文档的左上角为基准点。
screenX是指光标相对于该屏幕的水平位置(电脑屏幕),当前屏幕的左上角为基准点。
clientX是指光标相对于浏览器的水平位置 (当前可见区域),当前窗口的左上角为基准点。
所以我们如何获取鼠标坐标?根据自己的需求来调用这些方法就行了~
...
var x = event.pageX;
var y = event.pageY;
...
兼容性
说到兼容性js获取鼠标坐标,有两点要注意的是:
第一点这里我就不说了,有兴趣的可以自己研究一下。
主要谈一下第二点:
要想在ie和其他浏览器中都支持event事件,就要使用兼容性写法。
代码如下:
document.onclick() = function (event) {
event = event || window.event;
}
关于盒子坐标
这里介绍两种常用的获取盒子坐标的方法:
看起来它们都是获取当前盒子的 left 值,但是却有很大不同:
offsetLeft 可以返回没有定位盒子的距离左侧的位置,而 style.left 不可以。offsetTop 返回的是数字js获取鼠标坐标,而 style.top 返回的是字符串,除了数字外还带有单位:px。offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。对于 offsetLeft ,是从父盒子的padding 开始算,border不算,父亲没有定位则以body为准。案例
关于这些应用的案例,可以参考我的另外一篇文章 放大器实现,有对这些方法的部分运用。
发表评论
热门文章
Spimes主题专为博客、自媒体、资讯类的网站设计....
一款个人简历主题,可以简单搭建一下,具体也比较简单....
仿制主题,Typecho博客主题,昼夜双版设计,可....
用于作品展示、资源下载,行业垂直性网站、个人博客,....
zqx123
4小时前
PHP7.3,7.4,80 开启首页缩略图后,报错 Call to undefined function imgNums():不高兴::不高兴::大哭::大哭: