通过 JavaScript 获取页面上的鼠标位置

秋子淡无痕

以下是获取鼠标在页面上位置的代码实现.

1. /**
   
2. * 获取鼠标在页面上的位置
   
3. * @param ev                触发的事件
   
4. * @return                        x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
   
5. */
   
6. function getMousePoint(ev) {
   
7.         // 定义鼠标在视窗中的位置
   
8.         var point = {
   
9.                 x:0,
   
10.                 y:0
    
11.         };
    
12. 
    
13.         // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
    
14.         if(typeof window.pageYOffset != 'undefined') {
    
15.                 point.x = window.pageXOffset;
    
16.                 point.y = window.pageYOffset;
    
17.         }
    
18.         // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
    
19.         // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
    
20.         else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    
21.                 point.x = document.documentElement.scrollLeft;
    
22.                 point.y = document.documentElement.scrollTop;
    
23.         }
    
24.         // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
    
25.         else if(typeof document.body != 'undefined') {
    
26.                 point.x = document.body.scrollLeft;
    
27.                 point.y = document.body.scrollTop;
    
28.         }
    
29. 
    
30.         // 加上鼠标在视窗中的位置
    
31.         point.x += ev.clientX;
    
32.         point.y += ev.clientY;
    
33. 
    
34.         // 返回鼠标在视窗中的位置
    
35.         return point;
    
36. }

复制代码

原文：http://www.neoease.com/get-cursor-position-with-javascript/