原生JS获取鼠标XY轴的值

万和IT

1. /**
   
2. * 原生JS获取鼠标XY轴的值
   
3. *
   
4. * @param {Object} evt
   
5. * @returns
   
6. */
   
7. function mousePosition(evt) {
   
8.   evt = evt || window.event;
   
9.   //Mozilla
   
10.   if (evt.pageX || evt.pageY) {
    
11.     return {
    
12.       x: evt.pageX,
    
13.       y: evt.pageY
    
14.     }
    
15.   }
    
16.   //IE
    
17.   return {
    
18.     x: evt.clientX + document.body.scrollLeft - document.body.clientLeft,
    
19.     y: evt.clientY + document.body.scrollTop - document.body.clientTop
    
20.   }
    
21. }
    
22. 
    
23. //获取X轴坐标
    
24. function getX(evt) {
    
25.   evt = evt || window.event;
    
26.   return mousePosition(evt).x;
    
27. }
    
28. 
    
29. //获取Y轴坐标
    
30. function getY(evt) {
    
31.   evt = evt || window.event;
    
32.   return mousePosition(evt).y;
    
33. }
    
34. 
    
35. //外部函数调用1
    
36. document.getElementById("x").onclick = function (evt) {
    
37.   alert(getX(evt))
    
38. }
    
39. 
    
40. //外部函数调用2
    
41. function showXY(evt) {
    
42.   evt = evt || window.event;
    
43.   document.getElementById("n").innerHTML = "" + getX(evt);
    
44. }
    
45. window.onload = function () {
    
46.   document.body.onmousemove = showXY;
    
47. }
    
48. 
    

复制代码