查找鼠标相对于元素的位置

2024-04-11

我想用画布制作一个小绘画应用程序。所以我需要找到鼠标在画布上的位置。


由于我没有找到可以复制/粘贴的无 jQuery 答案,因此这是我使用的解决方案:

document.getElementById('clickme').onclick = function(e) {
      // e = Mouse click event.
      var rect = e.target.getBoundingClientRect();
      var x = e.clientX - rect.left; //x position within the element.
      var y = e.clientY - rect.top;  //y position within the element.
      console.log("Left? : " + x + " ; Top? : " + y + ".");
    }
#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}
<div id="clickme">Click Me -<br>
(this box has margin-left: 100px; margin-top: 20px;)</div>

JSFiddle 的完整示例 https://jsfiddle.net/u3xbhps6/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

查找鼠标相对于元素的位置 的相关文章

随机推荐

  • 在Python中处理大型密集矩阵

    基本上 在 python 中存储和使用密集矩阵的最佳方法是什么 我有一个项目 可以生成数组中每个项目之间的相似性度量 每个项目都是一个自定义类 并存储一个指向另一个类的指针和一个表示它与该类的 接近度 的数字 目前 它在处理约 8000 个
  • 为什么 Linq Contains 会生成此 SQL?

    背景 我正在开发一个系统 用于清理内部客户列表并找出联系人的电子邮件地址 其中我们已经拥有该公司其他人的电子邮件地址 为了做到这一点 我有 简化的 3 个表 Contacts ID CompanyId Email Domain 电子邮件域名
  • Fragment getArguments(在 onResume 中)返回 null

    我正在尝试将一些数据从活动发送到片段 我需要获取数据onResume片段的方法 但我想这是不可能的 参数只能在 onCreate 中接收吗 活动 public void someMethod String someString test B
  • 禁用触发的 Azure WebJob

    我有一个 webhook 触发的 Azure WebJob 由于 原因 我无法控制发送网络钩子的系统 每天发送一个 Webhook 它是唯一由 WebApp 托管的 WebJob 在测试过程中 我想禁用此 WebJob 因此我停止了 Web
  • “/”应用程序中的服务器错误。不提供此类页面

    我有一个主机 我用它托管了一个网页 cshtml扩大 我的主人是arvixe com它提供 ASP 和 NET 托管 但是当我尝试加载网页时 我收到此错误消息 应用程序中的服务器错误 不提供此类页面 说明 您请求的页面类型未被提供 因为它已
  • Microsoft Edge 不会在 Vagrant VM 中加载本地 nginx 网站

    我遇到了一个奇怪的问题 Microsoft Edge 无法加载托管在 vagrant 虚拟机内的本地 Craft CMS 网站 任何加载本地配置的主机名或 IP 的尝试都会返回 嗯 我们无法访问此页面 错误 我的主机文件中有一行 192 1
  • 使用“window.location.href”的函数中的两个 URL

    我正在使用 Marketo Embed 它允许我在使用时添加它 我的目标是使用 window location href 函数打开第一个 URL 一个 zip 文件 然后打开一个新 URL 一个页面 它仅使用其中一个 URL 如果它们是唯一
  • Gradle 找不到依赖项

    我正在尝试使用 Gradle 文件如下所示 Apply the java plugin to add support for Java apply plugin java In this section you declare where
  • 如何在tomcat上运行react应用程序

    我正在尝试运行以下示例 https github com ceolter ag grid react example https github com ceolter ag grid react example ag grid 反应示例 但
  • 以 jpeg 格式保存色彩空间

    我有一个 servlet 来转换和缓存较小版本的照片 它是使用 java awt image javax imageio 和第三方重采样过滤器实现的 原件均使用 sRGB 颜色配置文件上传 当我重新采样并再次保存它们时 它们仍然处于 sRG
  • 如何检查是否从 GridView 中选择了任何行?

    我在 aspx 页面中有一个 gridview
  • 如何在 MySQL 5.7 中获取 JSON 数组中唯一/不同的元素

    我有 mysql 5 7 带有一个包含一些 JSON 列的非规范化表 我需要为数组列提取每行的唯一 不同值 例如 a b b a c 预期输出应该是 a b c SET json a b b a c 我需要在此列表中获取唯一值 a b c
  • 比较两列并更改第三列时如何使用 ifelse?

    我仍然发现 R 中的 ifelse 结构有点令人困惑 我有以下数据框 df lt structure list snp structure 1 11 Label c AL0009 AL00014 AL0021 AL00046 AL0047
  • 是否存在 EOF != -1 或 WEOF != -1 的常见 C 环境

    C 标准定义EOF and WEOF使用以下语言 7 21 1 输入 输出 简介 标题
  • admob 使用的 WebViewCoreThread 即使父 Activity 已暂停,AdView 也会使用高 CPU [重复]

    这个问题在这里已经有答案了 我正在使用 Google Admob SDK v6 1 0 https developers google com mobile ads sdk download 并以编程方式实例化 com google ads
  • 有没有办法获取窗口的所有 BindingExpression 对象?

    有没有办法获取窗口的所有 BindingExpression 对象 当需要触发刷新表单的 PropertyChanged 事件数量太高且不是一个好的选择时 我尝试刷新表单 我正在考虑以另一种方式进行操作 即表单 窗口可以重新查询所有绑定 如
  • 如何让 HTTP 请求在 Flutter Web 中工作?

    我正在尝试从 我的网站 链接获取数据 http mrmatjar com kaka dataaza php http mrmatjar com kaka dataaza php 这是我的代码 import dart convert impo
  • 将文件中的非连续块映射到连续内存地址

    我对使用内存映射IO的前景感兴趣 最好是 利用 boost interprocess 中的设施实现跨平台 支持 将文件中的非连续系统页面大小块映射到 内存中连续的地址空间 一个简化的具体场景 我有许多 普通旧数据 结构 每个结构都有固定长度
  • 使用仅显示唯一值的 D3 对列表进行排序

    我需要对 D3 上显示唯一值的列表进行排序 我可以对其进行排序 但它显示了它的所有出现情况 该文件是 csv 我想按 邮政编码 列对其进行排序 仅作为背景 我稍后将使用此列表作为下拉菜单 因此这是过滤数据的一种方法 这就是我所拥有的 var
  • 查找鼠标相对于元素的位置

    我想用画布制作一个小绘画应用程序 所以我需要找到鼠标在画布上的位置 由于我没有找到可以复制 粘贴的无 jQuery 答案 因此这是我使用的解决方案 document getElementById clickme onclick functi