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

ゝ一纸荒年。 2022-05-16 01:20 167阅读 0赞

**事件对象**它是系统传给我们的一个对象,触发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**：它是获取你内容距离内容边框的位置  盒子模型里的坐标  与滚动条无关

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

想看更多请点击[我的博客][Link 1]

[Link 1]: https://blog.csdn.net/qq_40428678

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关事件对象

1 什么是事件对象用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event

谁践踏了优雅/ 2023年08月17日 15:38/ 0 赞/ 109 阅读

相关 JavaScript事件对象、target和this的区别、阻止默认事件、阻止冒泡、事件委托

JavaScript事件对象 1. event就是一个事件对象，写在侦听函数的小括号里面当形参来看。 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不

向右看齐/ 2022年12月24日 04:58/ 0 赞/ 145 阅读

相关 js中的对象.和对象[]的区别

![20201007162956971.png][] 浏览器默认第一个key是一个属性名，第二个它认为是一个表达式（变量）。 ![watermark_type_ZmFuZ3

曾经终败给现在/ 2022年12月12日 13:56/ 0 赞/ 212 阅读

相关 Javascript中的事件对象

1、事件对象在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事

ゝ一纸荒年。/ 2022年11月11日 13:20/ 0 赞/ 169 阅读

相关 JavaScript中的Node对象和事件

Node对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title

た入场券/ 2022年06月02日 01:16/ 0 赞/ 212 阅读

相关事件对象和事件源对象

事件对象 <body> <div style="width: 300px;height: 300px;background: red;">

港控/mmm°/ 2022年05月26日 11:08/ 0 赞/ 201 阅读

相关鼠标事件事件对象

事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘

Dear 丶/ 2022年05月17日 11:46/ 0 赞/ 303 阅读

相关 java中对象和对象引用的区别

1.何谓对象？　　在Java中有一句比较流行的话，叫做“万物皆对象”，这是Java语言设计之初的理念之一。要理解什么是对象，需要跟类一起结合起来理解。下面这段话引自《Ja

浅浅的花香味﹌/ 2022年05月16日 14:18/ 0 赞/ 207 阅读

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

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

ゝ一纸荒年。/ 2022年05月16日 01:20/ 0 赞/ 168 阅读

相关事件对象

事件对象：在事件触发时由浏览器传递给事件的接收事件对象：在事件处理函数中接收事件对象事件对象坐标：事件对象的坐标包括clientX和clientY，screenX和

秒速五厘米/ 2021年11月09日 05:52/ 0 赞/ 223 阅读