事件对象中clientX/Y 、pageX/Y、 screenX/Y、offsetX/Y的区别

事件对象它是系统传给我们的一个对象,触发DOM上的某个事件时，会产生一个事件对象event，事件对象里面包括很多方法和属性，鼠标和键盘等等事件触发的内容都不一样

事件对象有兼容性  那么怎么处理兼容   

兼容方法

ie中event事件对象是全局的所以加了window

<button> 点击 <button>
<script>

  var btn = document.getElementsByTagName('button')[0];//获取button添加事件
        
      btn.onclick = function(event) {
        //事件对象是event  名字可以随便
         event = event || window.event;
    }   
<script>

 | | 运算符  只要有一边为真就输出  如果event当前浏览器不支持就会跳到window.event

&&运算符  两边为真才为真 如果前面为false直接输出 如果第一个为true 那么直接输出第二个不管true还是false

 

我们先看看

clientX/Y ：它是获取获取可视区屏幕中鼠标的位置 X是水平方向 Y是垂直距离(与滚动条无关)

                    可视区:可视区就是你看见浏览器里面的大小  如果滚动条滚动 clientX 和 clientY是不会改变的 它只根据可视区来定位

 

然后看看和clientX/Y有点相似的pageX/Y

 

pageX/Y：它是获取整个页面中鼠标的位置 X是水平方向 Y是垂直方向 (与滚动条有关)(有兼容性)

                  如果滚动条滚动了  他只根据整个页面的大小来定位 同一个位置 但是滚动条滚动了 获取的坐标就是不相等的

 

接下来是screenX/Y

 

screenX/Y：它是根据你的电脑屏幕获取的鼠标的位置 X是水平方向 Y是垂直方向  与滚动条无关

                      如果你把浏览器缩小 点击的位置相同坐标还是不会改变 只和你的电脑屏幕有关

 

最后我们看看offsetX/Y

 

offsetX/Y：它是获取你内容距离内容边框的位置  盒子模型里的坐标  与滚动条无关

                   只是简简单单的获取你盒子里面的位置  是与盒子变框的位置

 

想看更多请点击我的博客