Question

我在点击时尝试在canavs中获取光标位置但是以下错误会弹出到我的控制台中

Uncaught TypeError: canvas.getBoundingClientRect is not a function

这是我的代码：

$(".canvas-wrapper").click(function getCursorPosition(canvas, event) {
  var rectangle = canvas.getBoundingClientRect();
    var x = event.clientX - rectangle.left;
    var y = event.clientY - rectangle.top;
    console.log("x: " + x + " y: " + y);
});

我根本无法理解什么是错的。有什么帮助吗？

Answer 1

jQuery传递给回调函数的第一个参数不是元素，而是事件对象。可以通过this访问该元素。

来自jQuery docs：

处理程序

输入：Function( Event eventObject )
     每次触发事件时执行的函数。

您可以将代码更改为：

$(".canvas-wrapper").click(function getCursorPosition(event) {
  var rectangle = this.getBoundingClientRect();
    var x = event.clientX - rectangle.left;
    var y = event.clientY - rectangle.top;
    console.log("x: " + x + " y: " + y);
});

在画布中获取光标位置

1 个答案:

处理程序