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日

相关文章

  • JavaScript用select实现日期控件

    下面是使用JavaScript的select标签实现日期控件的攻略: 1. 准备工作 首先,我们需要在HTML中定义一个日期选择器的容器,以及年、月、日三个select标签来分别展示年、月、日的选择菜单。我们先来看一下HTML代码: <div id="datePicker"> <select id="yearS…

    JavaScript 2023年6月11日
    00
  • 关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

    下面是关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案的完整攻略。 问题描述 在使用JS Lodop打印插件打印Bootstrap页面时,样式会出现错乱,包括字体大小、行高等样式不一致,导致打印效果不符合预期。 解决方案 经过实践和总结,我们得出以下两种解决方案,供大家参考。 解决方案一:使用样式重置 通过在打印页面中添加以下代码来重…

    JavaScript 2023年6月11日
    00
  • js控制div弹出层实现方法

    “JS控制div弹出层实现方法”有很多种方法,以下是其中一种比较常见的方法: 1. 首先创建一个html文件,并添加CSS样式 CSS样式的作用是设置弹出层的样式和位置,实现以上功能: .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%…

    JavaScript 2023年6月11日
    00
  • 常见的浏览器存储方式(cookie、localStorage、sessionStorage)

    下面就来详细讲解一下常见的浏览器存储方式。 1. Cookie 1.1 什么是Cookie Cookie是一种存储在用户计算机上的小型文本文件,它存储了网站的一些信息,并且可以被后续的网页访问。通常用来存储用户的个人偏好设置或者登录状态等信息。 1.2 Cookie的使用 1.2.1 设置Cookie 在JavaScript中设置Cookie可以使用docu…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript正则表达式中的global属性的使用

    详解JavaScript正则表达式中的global属性的使用 在 JavaScript 中,正则表达式(RegExp)是一个很常用的工具,它用于匹配和操作字符串。其中,g 属性(global)是非常重要的一个属性,本篇文章将详细讲解如何使用 global 属性来进行全局匹配。 什么是 global 属性? g(global)属性用于指定在整个文本中查找所有匹…

    JavaScript 2023年6月10日
    00
  • 深入理解setTimeout函数和setInterval函数

    深入理解setTimeout函数和setInterval函数攻略 JavaScript 的 setTimeout 和 setInterval 函数是在开发中经常使用的工具,它们都可以用来延时执行某些代码。虽然看上去它们很简单,但是深入理解它们的原理和用法确实很重要,本文将从下面三个方面进行介绍: setTimeout 和 setInterval 函数的基本用…

    JavaScript 2023年6月11日
    00
  • js data日期初始化的5种方法

    接下来我将详细讲解“js data日期初始化的5种方法”。 1. 使用 Date() 方法初始化日期 Date() 是 JavaScript 内置的方法。如果没有传入参数,它将返回当前日期和时间。使用 Date() 可以通过不同方式传递参数,初始化日期。以下是5种使用 Date() 方法初始化日期的方法: 1.1 不带参数 let now = new Dat…

    JavaScript 2023年5月27日
    00
  • 获取dom元素那些讨厌的位置封装代码

    获取DOM元素位置是Web开发中比较常见的操作,但是由于不同浏览器之间存在差异,所以封装获取DOM元素位置代码时需要注意一些细节。在以下步骤中,我们将展示如何获取DOM元素的位置并将其封装到一个函数中。 1. 获取元素位置 文档坐标(client coordinate):指相对于左上角(0, 0)位置的像素坐标,通过DOM节点的clientX和clientY…

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