获取鼠标位置首先要了解什么是event,event是一个声明了全局变量的一个对象,在chrome和ie下,可以随意访问,对于好奇的朋友console.log一下event。但!!!firefox下是没有event这个对象的!!
好消息的是:在ie8,chrome下,是有event这个对象的!
鼠标点击位置坐标
如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenx,screeny获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同游览器下表现的还算一致。
function getmousepos(event) { var e = event || window.event; return {'x':e.screenx,'y':screeny} }
简单代码即可实现,然而这时还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于游览器窗口的坐标,event的clientx,clienty属性分别表示鼠标点击位置相对于文档的左边距,上边距。
function getmousepos(event) { var e = event || window.event; return {'x':e.clientx,'y':clienty} }
clientx与clienty是获取相对于当前屏幕的坐标,忽略了页面滚动因素,这在很多环境下很有用,但当我们需要考虑页面滚动,也就是相对于文档(body元素)的坐标时怎么办呢?只要加上滚动的位移就可以了。
在chrome可以通过document.body.scrollleft,document.body.scrolltop计算出页面滚动位移,而在ie下可以通过document.documentelement.scrollleft,document.documentelement.scrolltop
function getmousepos(event) { var e = event || window.event; var scrollx = document.documentelement.scrollleft || document.body.scrollleft; var scrolly = document.documentelement.scrolltop || document.body.scrolltop; var x = e.pagex || e.clientx + scrollx; var y = e.pagey || e.clienty + scrolly; //alert('x: ' + x + '\ny: ' + y); return { 'x': x, 'y': y }; }
如对本文有疑问, 点击进行留言回复!!
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论