day-14.1 鼠标事件详解

前端通过鼠标事件可以完成一些很酷炫的操作；

鼠标事件可以给函数传一个实参，这个实参记录了这个鼠标事件的所有信息；

比如，我们写一个函数，function (e){.....//code}去接收鼠标事件的实参；

1 document.onclick = function (e) {
2     console.log(e); //点击会输出记录的事件
3 }

 

 接收的实参里面含有

事件传过来的参数很多，具体看需求去调用；

今天主要讲解的 pageX和 pageY ;以及 clientX和clientY 两个参数；

clientX和clientY是可视区域的X和Y，怎么理解可视区域，就是点击的时候只以当前客户端的窗口的坐标为准，而跟document.body的宽高坐标无关；

 1 <head>
 2     <style>
 3             body {
 4                 width:2000px;
 5                 height:2000px;
 6             }
 7         
 8     </style>
 9 </head>
10 =<body>
11         <div id="wrap"></div>
12 
13         <script>
14             document.onclick = function (e){
15                 console.log(e.clientX+":"+e.clientY); //窗口缩小的话以当前窗口（可视区域）为准；输出的是该事件触发的点在当前窗口（可视区域）的X和Y，并不是该点在body 的X和Y；
16             }
17         </script>
18 =</body>

pageX和pageY则刚好相反，是页面的X和Y，就是点击的时候以点击位置在document.body的坐标为准，跟当前窗口（可视区域无关）；

1 <script>
2             document.onclick = function (e){
4                 console.log(e.pageX+":"+e.pageY); //输出坐标；
5             }
6 </script>

pageX和pageY在IE8里面不兼容，如果碰到IE8 的需求，要把他转换成e.clientY+document.documentElement.scrollTop才行；

1 <script>
2             document.onclick = function (e){
3                 e = e || window.event;
4                 //console.log(e.pageX+":"+e.pageY);
5                 console.log((e.clientX+document.documentElement.scrollLeft)+":"+(e.clientY+document.documentElement.scrollTop));
6             }
7 </script>

兼容写法；

1 e.pageX = e.pageX || e.clientX + document.documentElement.scrollWidth;

 

posted @ 2018-06-26 14:06  bibiguo  阅读(117)  评论(0)    收藏  举报