clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

首先,这些属性都是 MouseEvent 对象的属性,表示事件发生时鼠标的位置信息。

接下来,我们逐个来分析一下这些属性的区别。

  1. clientX
    clientX 表示事件发生时,鼠标在浏览器视口中的水平坐标。也就是说,它是相对于浏览器窗口左上角的水平距离。

下面是一个示例:

<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`clientX: ${event.clientX}`);
    });
  </script>
</div>

当在 #box 内点击时,会在控制台输出鼠标在浏览器视口中的水平坐标。

  1. pageX
    pageX 表示事件发生时,鼠标在文档中的水平坐标。也就是说,它是相对于文档左上角的水平距离。在浏览器滚动的情况下,它的值会包括滚动距离。

下面是一个示例:

<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`pageX: ${event.pageX}`);
    });
  </script>
</div>

当在 #box 内点击时,会在控制台输出鼠标在文档中的水平坐标。

  1. offsetX
    offsetX 表示事件发生时,鼠标相对于事件对象的内部元素的水平坐标。

下面是一个示例:

<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`offsetX: ${event.offsetX}`);
    });
  </script>
</div>

当在 #box 内点击时,会在控制台输出鼠标相对于 #box 元素的水平坐标。

  1. x
    xpageX 的别名,表示事件发生时鼠标在文档中的水平坐标。在某些浏览器中,可能没有 pageX 属性,所以可以使用 x 来代替。

  2. layerX
    layerX 已经被废弃,但是在一些老的浏览器中仍然可以使用。它表示事件发生时,鼠标在相对于事件的目标元素的水平坐标。

下面是一个示例:

<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`layerX: ${event.layerX}`);
    });
  </script>
</div>

当在 #box 内点击时,会在控制台输出鼠标相对于事件目标元素 #box 的水平坐标。

  1. screenX
    screenX 表示事件发生时,鼠标在屏幕中的水平坐标。也就是说,它是相对于屏幕左上角的水平距离。

下面是一个示例:

<div id="box" style="width: 200px; height: 200px; border:1px solid #000;">
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`screenX: ${event.screenX}`);
    });
  </script>
</div>

当在 #box 内点击时,会在控制台输出鼠标在屏幕中的水平坐标。

  1. offsetLeft
    offsetLeft 表示元素相对于其最近的已定位祖先元素的左外边框的距离,单位为像素。

下面是一个示例:

<div id="container" style="position: relative; left: 50px; top: 50px;">
  <div id="box" style="width: 100px; height: 100px; border: 1px solid #000;"></div>
  <script>
    document.querySelector('#box').addEventListener('click', function(event) {
      console.log(`offsetLeft: ${event.target.offsetLeft}`);
    });
  </script>
</div>

当在 #box 内点击时,会在控制台输出 #box 相对于 #container 的左外边框的距离。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js实现最短的XML格式化工具实例

    下面是“js实现最短的XML格式化工具实例”的攻略。 1. 目标 我们的目标是实现一个最短的XML格式化工具,输入一段XML字符串,输出格式化后的XML字符串。 2. 思路 我们要实现的XML格式化工具需要满足以下几个要求: 保留XML中的所有节点和属性; 将XML字符串按照缩进格式化输出。 我们可以通过解析XML字符串,将XML字符串转换为JavaScri…

    JavaScript 2023年5月27日
    00
  • 简单通过settimeout看javascript的运行机制

    如何通过 setTimeout 看 JavaScript 的运行机制? JavaScript 是一门单线程语言。也就是说,在浏览器环境下所有的代码只会在一个线程上执行。而 setTimeout 函数可以进行一定的调度,这也是 JavaScript 事件机制的基础。 那么如何通过 setTimeout 来理解 JavaScript 的运行机制呢?下面是一个详细…

    JavaScript 2023年6月11日
    00
  • JavaScript ES 模块的使用

    当我们在编写 JavaScript 代码时,常常会遇到文件依赖管理、代码模块化等问题。在过去,我们需要使用模块加载器(Module Loader)来实现对 JavaScript 模块进行加载和管理,比如 RequireJS、SystemJS 等等。但是在 ES6 规范中,JavaScript 原生支持模块,我们可以使用 import 和 export 关键字…

    JavaScript 2023年5月27日
    00
  • 详细聊聊浏览器是如何看闭包的

    浏览器是如何看闭包的? 首先,让我们来回顾一下什么是闭包。闭包是在定义函数时创建的一种特殊作用域。可以访问父级作用域中定义的变量和函数,即使父级作用域已经被销毁了。这使得我们可以创建私有变量和函数,也可以用于实现某些高级特性,例如函数记忆和柯里化等。 那么,当浏览器解析Javascript代码时,是如何看待闭包的呢?以下是完整攻略: 函数作用域 Javasc…

    JavaScript 2023年6月10日
    00
  • 盘点javascript 正则表达式中 中括号的【坑】

    盘点 JavaScript 正则表达式中中括号的【坑】 在使用 JavaScript 正则表达式时,中括号 […] 是非常常见也非常重要的语法,它可以用于匹配一组字符中的任意一个字符。但是,在使用中括号时,也需要注意一些坑点。 1. 中括号中的 – 的意义 在中括号中如果使用 – 连接两个字符,表示匹配范围,例如 [0-9] 表示匹配 0 到 9 之间的…

    JavaScript 2023年6月10日
    00
  • 如何提示用户打开Cookie?

    下面我就来详细讲解如何提示用户打开Cookie。 如何提示用户打开Cookie 在网站开发过程中,我们有时需要使用Cookie来存储用户信息、记住用户的偏好设置等等,但是有些用户的浏览器可能默认禁用了Cookie,这就需要我们提示用户打开Cookie,这些提示可以包括以下几个步骤: 步骤一:检测Cookie是否被禁用 我们可以使用JavaScript判断浏览…

    JavaScript 2023年6月11日
    00
  • 前端中的JS使用调试技巧

    下面介绍一下“前端中的JS使用调试技巧”的完整攻略: 检查代码 在JS开发过程中,一些普遍的错误是输错单词,缺少/多写了一个符号,语法错误等。这些问题都可以通过检查代码来解决。下面是一些检查代码的技巧: 1. 使用Console 使用Console进行 debug 是最基本的调试方法之一。Console 是一个在浏览器中开发人员工具里的选项卡,它允许开发人员…

    JavaScript 2023年5月18日
    00
  • 在HTML中使用JavaScript的两种方法

    HTML是网页的基础语言,而JavaScript则是HTML中最常用的一种脚本语言之一。在HTML中使用JavaScript有两种方法:内部JavaScript和外部JavaScript。 内部JavaScript 内部JavaScript是指将JavaScript代码直接嵌入到HTML文档中,用<script>标签将其包围起来。 例如,下面的代…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部