javascript如何获取鼠标点击位置的坐标:
当用鼠标点击一个元素的时候,有时候需要获得当前鼠标指针的坐标,本章节就简单介绍一下如何达成此目的。
有时候我们需要的鼠标坐标的参照对象也是不同的,下面就分类介绍一下:
一.相对于显示屏幕的坐标:
可以使用screenX和screenY属性获取鼠标相对于屏幕左边缘和上边缘的距离,代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #mydiv { width:100px; height:100px; background-color:green; margin:100px; } </style> <head> <script type="text/javascript"> window.onload=function() { var odiv=document.getElementById("mydiv"); var ospan=document.getElementById("myspan"); odiv.onclick=function(ev) { ev=window.event||ev; ospan.innerHTML="x:"+ev.screenX+"y:"+ev.screenY; } } </script> </head> <body> <div id="mydiv"></div> <span id="myspan"></span> </body> </html>
以上代码,当点击绿色的div时,就可以显示鼠标指针在屏幕中的坐标。
说明:这两个属性在所有主流浏览器中兼容性良好。
二.获取相对于浏览器窗口的坐标:
在更多时候我们想获取鼠标指针相对于浏览器窗口的坐标,使用clientX和clientY属性即可实现。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #mydiv { width:100px; height:100px; background-color:green; margin:100px; } </style> <head> <script type="text/javascript"> window.onload=function() { var odiv=document.getElementById("mydiv"); var ospan=document.getElementById("myspan"); odiv.onclick=function(ev) { ev=window.event||ev; ospan.innerHTML="x:"+ev.clientX+"y:"+ev.clientY; } } </script> </head> <body> <div id="mydiv"></div> <span id="myspan"></span> </body> </html>
以上代码,当点击绿色的div时,就可以显示鼠标指针在浏览器窗口中的坐标。
说明:这两个属性在所有主流浏览器中兼容性良好。
附加介绍:
clientX和clientY属性是获取的相对于浏览器的坐标,但是有时候我们想获取相对于body(这里的body就姑且相当于网页页面)的坐标,但是如果网页过长的话,就无法获得了,在火狐浏览器下可以使用pageX和pageY来实现,因为这两个属性已经考虑到这个因素,但是其他浏览器暂时不支持。不过可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop。代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> * { margin:0px; padding:0px; } #mydiv { width:100px; height:100px; background-color:green; margin:100px; } </style> <head> <script type="text/javascript"> window.onload=function() { var odiv=document.getElementById("mydiv"); var ospan=document.getElementById("myspan"); odiv.onclick=function(ev) { ev=window.event||ev; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = ev.pageX || ev.clientX + scrollX; var y = ev.pageY || ev.clientY + scrollY; ospan.innerHTML="x:"+x+"y:"+y; } } </script> </head> <body style="height:1200px;"> <div id="mydiv"></div> <span id="myspan"></span> </body> </html>
以上代码可以获得鼠标指针相对于文档的坐标。
三.获取鼠标指针相对于某个元素的坐标:
这里就不做介绍了,相关内容可以参阅如何获取鼠标指针相对于当前容器的坐标一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8210
更多内容可以参阅:http://www.softwhy.com/javascript/