程序员经验分享-hwhale

父元素的 mousedown 事件中的 offsetX 和 offsetY 错误

2024-06-26

我在 mousedown 上获取 offsetX 时遇到问题。下面是我的代码

<!DOCTYPE html>
<html>
    <body>
        <div id="myP" onmousedown="mouseDown()">
            Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
            <p style="margin-left:50px">
             and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, 
            </p>
            and sets the color of the text to green.
        </div>
        <script>
            function mouseDown() {
                var left = event.offsetX;
                var top = event.offsetY;
                console.log(top+"::"+left);
            }
        </script>
    </body>
</html>

当我的鼠标按下在 div 区域上时，我得到了我想要的正确结果，但当我的鼠标位于段落区域上时，它给了我错误的结果。我无法理解为什么会发生这种情况，因为事件是 DIV 元素的父元素。

获取结果 情况 1：当我的鼠标悬停在 DIV 元素上时 顶部：17 像素，左侧：61 像素

情况 1：当我的鼠标悬停在 DIV 元素上时 顶部：11 像素，左侧：9 像素


The 鼠标事件.offsetX or 鼠标事件.offsetY将为您提供鼠标指针相对于目标节点填充边缘的坐标。

鼠标事件.offsetX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX

MouseEvent.offsetX 只读属性提供该事件和事件的填充边缘之间鼠标指针的 X 坐标偏移量。目标节点.

所以在这种情况下<p>里面的元素#myP您获得不同值的元素offsetX and offsetY正如预期的那样。

你可以做什么来始终获得相对于鼠标的坐标#myP元素是减去left and top给出的值getBoundingClientRect方法从MouseEvent.clientX and MouseEvent.clientY特性。

这是一个例子。

var myP = document.getElementById('myP'),
    output = document.getElementById('output');

function mouseDown(e) {
  var rect = e.currentTarget.getBoundingClientRect(),
      offsetX = e.clientX - rect.left,
      offsetY = e.clientY - rect.top;
  output.textContent = "Mouse-X: " + offsetX + ", Mouse-Y: " +  offsetY;
  console.log("Mouse-X: " + offsetX, "Mouse-Y: " + offsetY);
}

myP.addEventListener('mousedown', mouseDown, false);
body {
  margin: 0;
  font-family: sans-serif;
}

#myP {
  background: lawngreen;
  margin-left: 50px;
}

#myP > p {
  background: yellow;
  margin-left: 50px;
}

#myP > div > p {
  background: red;
  color: white;
  margin-left: 100px;
}
<div id="myP">
  Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph,
  <p>
    andsets the color of the text to red. The mouseUp() function is triggered when the mouse button is released,
  </p>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quaerat dolor modi et quidem repudiandae vero, recusandae laborum quae veritatis, doloribus similique accusamus quibusdam voluptate, dolore fugiat eum. Corporis, porro.
    </p>
  </div>
  and sets the color of the text to green.
</div>
<p id="output"></p>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

父元素的 mousedown 事件中的 offsetX 和 offsetY 错误 的相关文章

  • 如何在 Chrome 中将 Set 转换为数组？

    如何将集合转换为数组 https stackoverflow com questions 20069828 how to convert set to array给出了将 Set 转换为 Array 的三个答案 目前在 Chrome 浏览器

  • ECMAScript 中定义的内部属性是什么？

    什么是内部属性 http es5 github com x8 6在 ECMAScript 中定义为 规格是什么意思 该规范使用各种内部属性来定义 对象值的语义 这些内部属性不是 ECMAScript 语言 它们是由本规范定义的 纯粹用于说明

  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src

  • 设置三个输入数字的最大值

    我有三个输入数字

  • Angular 4 - 具有动态参数值的自定义验证器

    我编写了一个自定义验证器 用于检查日期是否高于某个最小日期 代码如下所示 export function validateMinDate min Date ValidatorFn return c AbstractControl gt if

  • 如何在 Google 地图上旋转叠加图像？

    我正在尝试将一系列叠加层放置到 Google 地图上 我正在跟随地面覆盖层的示例代码 https developers google com maps documentation javascript examples groundover

  • 发送带有图像的嵌套 JSON

    我一直在尝试研究一种能够通过 Ajax 将嵌套 JSON 请求发送回服务器的方法 根据我的理解 我们主要用于向服务器发送图像或文件的 formdata 在这种情况下不起作用 因为 FormData 似乎不处理嵌套对象 这就是我需要发送的有效

  • 在 Bootstrap 选择器上使用 jQuery 取消选择选项

    我对一些 UI 元素使用 Bootstrap SelectPicker 它允许用户选择多个选项并将其呈现在段落标签中的屏幕上 他们还应该能够删除选定的选项 这是我的代码 用于将选定的选项渲染到屏幕上 以便每个选项旁边都会显示一个 X 单击它

  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标

  • LightningChart JS - LineSeries / Progressive X 的损坏

    我在使用 LightningChart 时遇到了一个有趣的问题 它似乎会破坏或以其他方式减少我的数据 具体取决于它与图表的 DateOrigin 的距离 我的数据是每秒 1000 个样本 我试图一次显示 1 2 周的数据 我正在使用 Cha

  • 在 ReactJS 中更改 URL onClick

    在我的项目中我有一个TabComponent它显示 3 个选项卡 首页 热门 全部 现在 我正在使用context反应维持 activetab它存储当前选项卡 toggleTab改变的方法activetab using setState 选

  • css bootstrap 下拉菜单在 IE 中看起来不同

    我正在使用CSS引导程序3 2 0 http getbootstrap com css 然而 当在 IE 中查看该网站时 菜单选项周围有一个黑色边框 而且下拉菜单按钮看起来也有所不同 如果您查看该网站http getbootstrap co

  • 从组件刷新/重新加载 ember 路由

    我有一个组件 它实际上是一个模式对话框 当我完成该对话框并按 确定 按钮时 我想留在打开该对话框的停留页面上 这并不难 但问题是该对话框更改了数据 我通过 REST 调用获取数据 因此我需要刷新已经所在的路线以反映数据更改 因为我是从组件中

  • Bootstrap 面板主体，内有表格

    我有一个引导面板 单击图标即可折叠并自动关闭 该面板内部包含一个全宽的表格 但只有在没有任何内容时才看起来像这样panel body 例如 这张桌子横跨面板的整个宽度和高度 看起来不错 但如果我可以有一个围绕桌子的类 我会更喜欢 但是 如果

  • HTML 画布从 getImageData 返回“偏离一些”字节

    我找到getImageDataHTML 画布似乎返回不正确的字节值 我使用以下 Python 代码生成了 1x1 px 图像 from PIL import Image import numpy as np a np array 12 18

  • 将json数据从servlet传递到jsp到js文件

    我得到了这个创建 JSON 数据的 servlet 我想将此数据传递到一个 jsp 页面 该页面应该通过 InfoVis 工具包显示数据 servlet java JSONObject json new JSONObject JSONArr

  • 如何拦截javascript中innerHTML的变化？

    我需要拦截网页内单元格内容的任何更改 以下代码显示 addEventListener 不起作用 function modifyText alert var el document getElementById mycell el inner

  • 如何防止 Bootstrap Navbar Toggle 下推内容？

    我将 Bootstrap 与静态顶部导航栏一起使用 如下所示

  • 如何从索引文件迭代多个导入的模块

    我有一个名为Polygons我在那里创建了一个index jsfile 以导出目录中的所有文件 它看起来像这样 export default as europe from europe export default as northAmer

  • CSS 链接图像带有下划线（“a”显示设置为阻止）

    我有一个菜单 我希望每个单独的项目中文本周围的所有空间都能将用户带到指定的页面 我在网上查了一下 发现最好的解决方案是将 a 显示设置为阻止 如下 a display block height 100 text decoration und

随机推荐

  • 如何使用 python 绘制具有两个斜率的线

    我使用下面的代码绘制一条具有两个斜率的线 如图所示 斜率应该在一定限制 limit 5 之后下降 我正在使用矢量化方法来设置斜率值 还有其他方法来设置斜率值 有人可以帮助我吗 import matplotlib pyplot as plt

  • 无法使用 TF 服务构建，本地构建正常

    我正在尝试让一个项目能够进行持续集成构建 目前 它由库 dll net 4 5 应用程序和 WP8 应用程序组成 我使用团队基础服务和 GIT 作为我的源代码控制 我能够设置构建配置 但失败并显示以下消息 Exception Message

  • 单元测试期间的 Python 日志捕获

    我正在尝试捕获在 python 单元测试过程中创建的日志 并在此处看到了代码 https stackoverflow com a 1049375 576333 https stackoverflow com a 1049375 576333

  • 用于分页的php示例脚本[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 任何人都可以建议一个好的分页 php 脚本 其中人们想要分页显示数据库中的大量项目 以下链接可以帮助您

  • 使用 dplyr 和 ggplot 绘制包括负值的多面水平发散堆积条形图

    我希望这个例子能够让人清楚 我想要堆叠条形 其中中间条形跨越 0 因为它代表中性值 这与李克特量表一起使用 为了重现性 我使用钻石数据集 以下示例与我的用例足够接近 并演示了我很难以正确的顺序获取 好 或 正 数据 因此中性最接近 0 这是

  • “from-import”是否执行整个模块？

    好的 所以我知道from import与 完全 相同import 但这显然不是因为命名空间的填充方式不同 我的问题主要是因为我有一个utils我的应用程序中的每个其他模块都使用一个或两个函数的模块 我正在努力合并标准库logging模块 据

  • 如何在mockito中模拟Spring依赖

    我正在尝试嘲笑 Spring Beans 我能够模拟对象 B 和 C 但无法模拟 B 类内的对象 插入类 A 中的模拟包含 B 但 X 和 Y 为空 即使我嘲笑了它们 Mockito 有没有办法模拟 Spring bean 中成员的对象 N

  • 使用迭代器时无限循环

    Set key1 map keySet Iterator it1 key1 iterator int cnt 0 while it1 hasNext cnt 这段代码导致无限循环的可能性有多大 实际上这会导致无限循环 我怀疑是因为我没有服用

  • 在php中获取二进制数据大小的正确方法是什么？

    我已阅读文件的一部分 现在想确保该部分的大小正确 我怎样才能在 php 中做到这一点 part fread file 1024 return some function part 1024 我已经阅读了这些示例 但我怀疑是否要使用 strl

  • 记录使用 OpenAL 播放的样本

    我在 iOS 上使用 OpenAL 同时播放 9 个循环 为了使循环 100 同步 它们开始在不同的线程上运行 有关使用 OpenAL 记录正在播放的内容的任何指示 教程 如果我使用不同的线程 我会遇到录制问题吗 iOS 上的 OpenAL

  • Interlocked.CompareExchange 可以抛出 NullReferenceException 吗？

    From https msdn microsoft com en us library bb297966 v vs 110 aspx https msdn microsoft com en us library bb297966 v vs

  • Cookies - 日期过期不起作用，关闭浏览器时cookies将被清除

    我试图在 cookie 中保存用户电子邮件 1 年 但当浏览器关闭时 cookie 会被删除 这是我尝试使用的代码 document cookie userEmail email document cookie expires Wed 31

  • Zeppelin：如何在 zeppelin 中重新启动 SparkContext

    我正在使用 zeppelins Spark 解释器的隔离模式 在这种模式下 它将为 Spark 集群中的每个笔记本启动一项新工作 我想在笔记本执行完成后通过 zeppelin 终止该作业 为此我做了sc stop这停止了 sparkCont

  • Pandas 如何删除包含所需字符串的行

    我想删除包含所需字符串的所有行 假设我有以下数据框 A B C 1 a x w g n 3 l p j p v 我想删除包含字符串的所有行p 我已经搜索过它 但大多数答案都是基于列名称 就我而言 我不会知道它可以出现在任何列中 输出数据帧应

  • 如何用纯色填充位图？

    我需要使用唯一的 RGB 颜色创建 24 位位图 分辨率 100x100 像素 并将生成的图像保存到磁盘 我目前使用的是SetPixel http msdn microsoft com en us library 6c7eyzyb aspx

  • 在 Google App Engine 数据模型中进行“OR”查询

    我想进行这样的查询 从地址 或年龄 的人中选择名称 这在GAE模型中可能吗 所有事物都包含 AND 闭包 而不是 OR 我如何使用 JDO JPA Objectify 来做到这一点 提前致谢 数据存储上没有 OR 运算 您必须执行两个单独的

  • Hibernate 对于 Android 应用程序来说是一种杀伤力吗？ [复制]

    这个问题在这里已经有答案了 我正在为我的 Android 应用程序寻找一个好的 ORM 乍一看似乎对于移动设备我更喜欢使用更简单的东西 问题是我只是在这里假设 没有真正的证据 所以我想我应该询问社区的意见 也许有人有过这样的经历 它是一个相

  • 并行运行 Angular 和 AngularJS 框架

    我找到了描述如何将 Angular 2 组件集成到 AngularJS 中的资源 但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目 需要 TypeScript 的转译器 需要 ES6 需要 import 语句 我想

  • Ext lib 对话框和文件上传控件

    我有一个包含文件上传控件的对话框 当在对话框中提交表单时 除所选文件之外的所有内容都会正确保存 我怀疑对话是造成这种情况的原因 我是否必须设置一个属性才能启用它 或者是否有某种解决方法 I think this http www domin

  • 父元素的 mousedown 事件中的 offsetX 和 offsetY 错误

    我在 mousedown 上获取 offsetX 时遇到问题 下面是我的代码 div Click the text The mouseDown function is triggered when the mouse button is p

热门标签