javascript - JavaScript: Getting the right object when handling events

Question

So, I have code like this:

function Shape() {
  ...
  var canvas = document.getElementById('canvas');
  ...

  canvas.onmousedown = handleMouseDown;       

}

function handleMouseDown(e) {
  this.width // Doesn't refer to the shape
  // How do I get a reference to the shape here?
}

Question - how do I get a reference to the Shape in my event handler?

score 0 · Accepted Answer

function handleMouseDown(e) {
    console.log(e);
}

然后在 Web 浏览器控制台中查看e对象内部的内容。尤其是e.target物体内部。

score 0 · Accepted Answer

在您要引用的事件处理程序代码中

this.width // in function handleMouseDown(e)

我想知道你认为这个变量应该包含什么。它是函数 Shape() 上下文中的可变宽度吗？您没有在示例中定义它，所以我只是猜测。无论如何，这有什么好处？

我想，如果我做对了，你想在画布内管理一些形状，并想在你的程序中引用它们。如果这是正确的，我将尝试概述您可以针对此问题采取的措施。

从 mouseclick 事件中获取位置：如何获取鼠标单击画布元素的坐标？

然后使用您相对于画布的鼠标位置，使用您自己的代码检查不同形状的矩形区域。

为程序中每个形状的 x、y 位置和宽度/高度创建一个对象。

向此形状添加一个函数，该函数可由 mouseclick 事件处理程序代码调用，或者仅在事件处理程序代码中使用形状的坐标和其他相关属性来应用任何更改。

score -1 · Accepted Answer

您可以使用^[MDN]this将函数内部绑定到Shape实例：.bind

canvas.onmousedown = handleMouseDown.bind(this);

或者如果浏览器不支持.bind，使用闭包：

var self = this;
canvas.onmousedown = function(event) {
    handleMouseDown.call(self, event);
};

但这也意味着this不再引用 DOM 元素。您可以通过event.target或event.currentTarget虽然访问它。

javascript - JavaScript: Getting the right object when handling events

3 回答 3

Related

Reference