捕捉鼠标在页面中的坐标–兼容各个浏览器

         捕捉鼠标在页面中的坐标是很重要的,不管是拖动件事,还是动画效果,最最重要的就是捕获到鼠标的坐标,这样我们才能根据鼠标的移动等等操作来控制页面的元素,本来这是一个比较简单,通过浏览器里面对象就可以获得,但是比较悲惨的就是,各个浏览器提供的对象不一样,获得结果也是不一样的。

        在不是ie的浏览器里面,可以通过pageX来获得数据,这个比较简单,因为这个可以直接获得鼠标在页面中的位置,但是对于ie浏览就很纠结了,涉及到好几个属性,

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。

scrollTop一个是scrollLeft
第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度;
第二个代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度
所以获得页面鼠标位置的方法就是:
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft
y:ev.clientY + document.body.scrollTop - document.body.clientTop


















x的坐标是:

y的坐标是:


































































































效果:
演示地址: http://www.cangzhang.com/wp-content/uploads/2012/08/shijian.html

 

共有 0 条评论

Top