用ScreenX/Y与PageX/ClientX/Y的区别

在前端开发中，经常会用到鼠标事件对象参数中的screenX/Y和pageX/Y，以及相对于文档窗口的clientX/Y。它们分别代表了鼠标位置相对于屏幕、文档窗口和当前可视区域的坐标值。下面我们将详细介绍它们之间的区别，并给出使用示例。

ScreenX/Y

screenX/Y 返回鼠标相对于用户屏幕左上角的水平和垂直坐标。这个坐标系是相对于整个电脑屏幕的，而不是单独针对当前浏览器窗口或文档。

-------------------------------------- --------------- -
  ------------------ --------- ----------------- -------------------
---

PageX/Y

pageX/Y 返回鼠标相对于文档内容区域左上角的水平和垂直坐标。这个坐标系是相对于整个文档页面的，而不是单独针对当前浏览器窗口。

---------------------------------- --------------- -
  -------------------- --- --------------- -----------------
---

ClientX/Y

clientX/Y 返回鼠标相对于当前文档窗口左上角的水平和垂直坐标。这个坐标系是相对于当前可视区域的，它会随着文档内容的滚动而改变。

-------------------------------------- --------------- -
  ------------------ --------- ----------------- -------------------
---

区别

在实际开发中，我们需要根据具体需求选择使用哪种坐标系。一般来说：

  • 如果需要知道用户鼠标在整个屏幕上的位置，可以使用screenX/Y。
  • 如果需要知道用户鼠标在文档页面上的位置，可以使用pageX/Y。
  • 如果需要知道用户鼠标在当前可见窗口上的位置，可以使用clientX/Y。

同时，需要注意以下几点：

  1. 在不同浏览器中，这些属性有时候可能会有不同的值或行为。
  2. pageX/Y 和 clientX/Y 的值都受到文档滚动的影响，因此在处理需要固定位置的场景（如拖拽）时应该特别小心。
  3. 在移动设备上，这些属性的值将与触摸事件相关，而不是鼠标事件。

示例代码

下面是一个简单的示例，展示了如何使用pageX/Y和clientX/Y计算出鼠标在文档中移动的距离，并将其应用于一个元素的样式中。

--------- -----
------
------
  ----------------------
  -------
    ---- -
      ------ -----
      ------- -----
      ----------------- ----
      --------- ---------
    -
  --------
-------
------
  ---- ---------------
  --------
    --- --- - -------------------------------
    --- ------- -------
    -------------------------------------- --------------- -
      ------ - ----------- - ---------------
      ------ - ----------- - --------------
      -------------------------------------- -------------
    ---
    ------------------------------------ --------------- -
      ----------------------------------------- -------------
    ---
    -------- ------------------ -
      --- ---- - ----------- - -------
      --- ---- - ----------- - -------
      -- ----- - -- ---- - --
      -- ----- - -- ---- - --
      -------------- - ---- - -----
      ------------- - ----

---------------------------------------------------------- ----------
-------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • 用 JavaScript 从数组中移除空元素

    在前端开发中，我们经常需要操作数组。当数组中包含了一些空元素时，这些元素可能会影响到我们的代码执行效率或者引起一些错误。因此，我们需要一个方法来移除这些空元素。 方法一：使用 filter() Jav...

    7 年前
  • 在 Node.js 如何实现“包含”其他文件的功能？

    在 Node.js 中，我们经常需要重复使用一些代码片段或者函数，如果每次都将这些代码复制粘贴过来，显然是非常低效的。这个时候，我们就可以使用“包含”（Include）其他文件的方法，将这些代码片段或...

    7 年前
  • 如何关闭特定的 ESLint 规则

    简介 ESLint 是一个用于检查 JavaScript 代码质量的工具，它可以帮助我们在编写代码时遵循一些最佳实践和规范，并且可以自动发现代码中的错误和潜在问题。

    7 年前
  • 和子函数之间的区别是什么？

    在前端开发中，函数是一个非常重要的概念。其中，子函数和闭包函数是两种常见的函数形式。虽然它们都可以用来封装一些代码，并实现代码的复用，但它们之间还是有一些区别的。 子函数 子函数顾名思义就是在另一个函...

    7 年前
  • 为什么是setTimeout(fn, 0)有时有用吗？

    在前端开发中，我们通常会使用定时器函数setTimeout()来延迟执行某些操作。它的第二个参数表示延迟的时间（以毫秒为单位），当该时间过去后，将会执行第一个参数作为回调函数。

    7 年前
  • 我怎么能混淆（保护）JavaScript呢？

    JavaScript 是一门非常流行的编程语言，由于其易于学习和使用，在 web 开发中得到了广泛应用。但是，由于 JavaScript 可以轻松地被解析和修改，因此在许多情况下，我们需要对 Java...

    7 年前
  • 什么技术可以用来定义JavaScript中的类，它们的取舍是什么？

    在JavaScript中，我们可以使用传统的原型继承方法来定义类，也可以使用比较新的class语法糖来定义类。本文将探讨这两种方法的异同点，并且给出一些选用哪一种方法的指导建议。

    7 年前
  • CommonJS、AMD 和 RequireJS 的关系

    前言 在前端开发中，JavaScript 模块化已经成为了一种不可或缺的开发方式。而 CommonJS、AMD 和 RequireJS 是三种比较流行的 JavaScript 模块化规范，本文将会探究...

    7 年前
  • 公司vue组件库开发心得

    公司 Vue 组件库开发心得 我们开发了一套公司内部使用的 Vue 组件库，以下是我们在开发过程中的心得体会。 组件设计 组件复用性 组件复用性是很重要的，尽可能让组件能够被多个项目复用。

    7 年前
  • jQuery JavaScript：实现iframe内容的访问

    在前端开发中，有时我们需要使用iframe来加载其他网页或应用程序。但是如果要在父页面中对iframe内部的内容进行操作，就需要使用JavaScript来实现。 jQuery是一个流行的JavaScr...

    7 年前
  • 为什么不是；T◎ܫ◎和☺有效的JavaScript变量的名字吗？

    在JavaScript中，变量名可以使任何由字母、数字、下划线或美元符号组成的字符串。但是，并不是所有的字符都适合作为变量名，例如“T◎ܫ◎”或“☺”。 JavaScript标识符规则 在深入探讨为什...

    7 年前
  • 如何使用 jQuery 的 css() 方法删除样式属性？

    在前端开发中，我们经常需要添加、删除或修改元素的样式。而 jQuery 提供了一个方便且易于使用的方法 —— css()。 通过 css() 方法，我们可以轻松地添加、修改和获取元素的 CSS 样式属...

    7 年前
  • 访问控制如何允许源报头工作？

    简介 在前端开发中，我们经常需要处理跨域请求的问题。为了保证网站安全，浏览器会对不同源的请求进行限制。其中一个限制是浏览器不允许从一个源加载的资源与来自另一个源的资源进行交互。

    7 年前
  • JavaScript中是否有一种内置的方法来检查字符串是否是有效的数字？

    JavaScript中有一种内置的方法来检查字符串是否是有效的数字，这个方法是isNaN()。但是需要注意的是，它只会返回布尔值，表示参数是否不是一个数字类型。 如果要判断一个字符串是否是有效的数字，...

    7 年前
  • 用JavaScript将字符转换为ASCII码

    在前端开发中，有时候需要将字符转换为对应的ASCII码。通过JavaScript可以很方便地实现这一功能。本文将详细介绍JavaScript如何将字符转换为ASCII码，并提供示例代码以供学习参考。

    7 年前
  • 如何使用jQuery删除所有CSS类？

    在前端开发中，我们经常需要操作 HTML 元素和其对应的 CSS 类。有时候，我们需要删除某个元素上所有的 CSS 类。本文将介绍如何使用 jQuery 来实现这一功能。

    7 年前
  • 找到一个项目是否存在于 JavaScript 数组中的最佳方法？

    在前端开发中，经常需要在 JavaScript 数组中查找特定的元素。本文将介绍如何找到一个项目是否存在于 JavaScript 数组中的最佳方法以及该方法的优缺点。

    7 年前
  • JavaScript 中的对象比较

    在 JavaScript 中，对象是一种重要的数据类型。当我们需要比较两个对象时，通常会遇到一些问题。本文将详细介绍 JavaScript 中对象的比较机制，并提供实用的示例代码和指导意义。

    7 年前
  • 用jQuery更改下拉列表的选定值

    在前端开发中，下拉列表常常用于选择特定的选项。有时候我们需要通过代码来动态更改下拉列表的选项，这时候就可以使用jQuery来实现。 准备工作 首先，在HTML文件中添加一个下拉列表： ------- ...

    7 年前
  • 在JavaScript中使用“原型”，而不是“这个”？

    在JavaScript中，对象是基础。当我们创建一个对象时，它会自动从Object.prototype继承属性和方法。但是，在实践中，我们通常需要更具体的对象来满足我们的需求。

    7 年前

相关推荐

    暂无文章