没有 Jquery 的 Canvas 上的鼠标坐标

发布于 2024-12-10 09:58:19 字数 152 浏览 0 评论 0原文

我目前正在使用：

e.pageX - $("#canvas").offset().left

这是我使用 Jquery 的唯一目的，所以我更愿意仅使用 javascript 重写它。

我可以用什么来代替这个？

原文

I am currently using:

e.pageX - $("#canvas").offset().left

This is the only thing I am using Jquery for, so I would prefer to re-write this using just javascript.

What can I use to replace this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一片旧的回忆 2024-12-17 09:58:19

N Rohler 提供的答案仅在 Internet Explorer 中运行良好（IE8 之前有一些错误 - 但我想这对你来说不会成为问题，因为你使用的是画布和 pageX），并且在 Opera 中如果填充是0，在 Safari/Chrome 中，如果边框宽度也为 0。不幸的是，在 Firefox 中，offsetX 和 offsetY 未定义。
http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

Kaninepete，为了简单起见，我认为您应该重新考虑获取相对于画布元素的鼠标坐标的方式。您所要做的就是计算画布的位置，这是使用 .getBoundingClientRect() 的一个非常简单的任务（另外，如果需要，不要忘记添加滚动偏移量），然后从 pageX 和 pageY 中减去它。

回复收藏 0 原文

软甜啾 2024-12-17 09:58:19

var x = e.offsetX,
    y = e.offsetY;

（再次）更新以实现（正确的）Firefox 兼容性：

var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
    y = e.offsetY || e.pageY - rect.top - window.scrollY;

var x = e.offsetX,
    y = e.offsetY;

Updated (again) for (correct) Firefox compatibility:

var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
    y = e.offsetY || e.pageY - rect.top - window.scrollY;

回复收藏 0 原文

梦萦几度 2024-12-17 09:58:19

您可以用下面的代码替换它

<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>


function mouseDown(e)
{
  var x=e.clientX-canvas.offsetLeft;
  var y=e.clientY-canvas.offsetTop; 
}

You can replace it by the below code

<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>


function mouseDown(e)
{
  var x=e.clientX-canvas.offsetLeft;
  var y=e.clientY-canvas.offsetTop; 
}

回复收藏 0 原文

~没有更多了~