Canvas鼠标事件模板开发遇TypeError：无法读取pal的posX属性

嘿，我来帮你拆解这个错误的根源，其实问题就出在contains函数的参数使用和this指向的匹配上！

你说已经把pal对象作为参数传入contains(pal)了，但控制台报错说无法读取undefined的posX属性。我梳理了你的代码逻辑后发现：contains函数内部根本没用到传入的pal参数，反而在访问this.posX——这就是核心问题：

当你直接调用contains(pal)时，this的指向并不是pal实例（非严格模式下它指向全局的window对象，严格模式下就是undefined），而window或者undefined自然没有posX这个属性，所以才会抛出这个错误。

给你两个可行的解决方案：

方案一：修改contains函数，使用传入的参数对象 #

把contains函数里的this替换成传入的参数，这样就能正确读取pal的属性了：

contains: function(obj) {
  return (mouseX > obj.posX && mouseX < obj.posX + obj.width &&
          mouseY > obj.posY && mouseY < obj.posY + obj.height);
}

这样调用contains(pal)的时候，函数就会使用你传入的pal对象来判断鼠标位置，不会再出现属性未定义的问题。

方案二：把contains作为Text类的实例方法 #

这是更符合面向对象设计的方式，把contains方法放到Text类的构造函数里，让this自动指向当前Text实例：

Text: function(posX, posY, text) {
  this.posX = posX;
  this.posY = posY;
  this.text = text;
  this.width = ctx.measureText(text).width;
  this.height = 20; // 根据你的需求调整行高

  // 将contains作为实例方法
  this.contains = function() {
    return (mouseX > this.posX && mouseX < this.posX + this.width &&
            mouseY > this.posY && mouseY < this.posY + this.height);
  }
}

之后调用的时候直接写pal.contains()就行，不需要传参数，此时this就会精准指向pal实例，完美读取它的posX、width等属性。

另外还要注意一点：确保调用contains函数的时候，pal已经完成实例化了（比如不要在pal声明前就调用这个函数），不过从你的错误信息来看，主要问题还是this和参数的不匹配~

内容的提问来源于stack exchange，提问作者jballes