js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容
(1)相对于屏幕
如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致。
function getMousePos(event) {
var e = event || window.event;
return {'x':e.screenX,'y':screenY}
}
(2)相对浏览器窗口
简单代码即可实现,然而这是还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,event的clientX,clientY属性分别表示鼠标点击位置相对于文档的左边距,上边距。于是类似的我们写出了这样的代码
function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':clientY}
}
(3)相对文档
简单测试也没什么问题,但是clientX与clientY获取的是相对于当前浏览器窗口的坐标,忽略页面滚动因素,这在很多条件下很有用,但当我们需要考虑页面滚动,也就是相对于文档(body元素)的坐标时怎么办呢?加上滚动的位移就可以了,下边我们试试怎么计算页面滚动的位移。
其实在Firefox下问题会简单很多,因为Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了。
在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 };
}
相关推荐
js获取鼠标点击的位置常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,因为 event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的,而不考虑页面的滚动条...
一个基于VC环境下的程序源码,功能是快速获取鼠标所在位置的顔色值
JS获取鼠标位置,在IE6.0 和 FF3.0.1 下测试有效。对于返回弹出层,并在鼠标所在位置显示,可以使用。
javascript获取鼠标当前位置坐标,并显示出来
JavaScript获取鼠标位置和鼠标与div的相对位置
获取鼠标的坐标,通过js任意获取鼠标点击处的位置坐标。
呵呵,各种获取鼠标位置的方法,很好的, 可以用于上传图片切割啊啥的
javascriptjs获取鼠标点击时的坐标位置 只想帮你度过这个问题 加油你也行的
canvas例子,如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行,F12可查看源代码。
本文实例讲述了js获取鼠标位置的方法。分享给大家供大家参考,具体如下: 用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对...
描述javascript获取鼠标坐标的各种方式,其中有图说明,很清晰,很容易理解!
主要介绍了JS获取鼠标位置距浏览器窗口距离的方法,结合实例形式分析了JS针对各种常见浏览器窗口及鼠标响应操作相关技巧,需要的朋友可以参考下
js获取鼠标滚轮滚动像素,
本文主要介绍了利用javascript实现获取鼠标当前的位置的具体方法,具有很好的参考作用,需要的朋友可以看看
主要介绍了基于JavaScript获取鼠标位置的各种方法 ,需要的朋友可以参考下
对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解。具体代码如下: 代码如下:<html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv=”...
主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
通过鼠标点击 获取鼠标点击处的颜色 以及颜色值