代码之家 › 专栏 › 技术社区 › Cannon Moyer

侦听器丢失对“this”的引用-jQuery

jquery javascript

Cannon Moyer · 技术社区 · 7 年前

我有一个为鼠标事件初始化画布元素的类。监听器在构造函数中初始化,但是当我调用 findxy this.flag 导致错误,因为它们未定义,这使我相信侦听器正在丢失对它们的引用 this 打电话的时候 findxy

class Signature {
  constructor() {
    this.signed = false;
    this.prevX = 0;
    this.currX = 0;
    this.prevY = 0;
    this.currY = 0;
    this.dot_flag = false;
    this.flag = false;
    this.canvas = document.getElementById('can');

    this.ctx = this.canvas.getContext("2d");
    this.w = this.canvas.width;
    this.h = this.canvas.height;

    this.canvas.addEventListener("touchmove", function(e) {
      mobilexy('move', e)
    }, false);
    
    this.canvas.addEventListener("touchstart", function(e) {
      mobilexy('down', e)
    }, false);
    
    this.canvas.addEventListener("touchleave", function(e) {
      mobilexy('up', e)
    }, false);

    this.canvas.addEventListener("mousemove", function(e) {
      findxy('move', e)
    }, false);
    
    this.canvas.addEventListener("mousedown", function(e) {
      findxy('down', e)
    }, false);
    
    this.canvas.addEventListener("mouseup", function(e) {
      findxy('up', e)
    }, false);
    
    this.canvas.addEventListener("mouseout", function(e) {
      findxy('out', e)
    }, false);

    findxy(res, e) {
      if (res == 'down') {
        this.prevX = this.currX;
        this.prevY = this.currY;
        this.currX = e.pageX - this.canvas.offsetLeft;
        this.currY = e.pageY - this.canvas.offsetTop;

        this.flag = true;
        this.dot_flag = true;
        
        if (this.dot_flag) {
          this.ctx.beginPath();
          this.ctx.fillStyle = x;
          this.ctx.fillRect(currX, currY, 2, 2);
          this.ctx.closePath();
          this.dot_flag = false;
        }
      }
      
      if (res == 'up' || res == "out") {
        this.flag = false;
      }
      
      if (res == 'move') {
        if (this.flag) {
          this.prevX = this.currX;
          this.prevY = this.currY;
          this.currX = e.pageX - canvas.offsetLeft;
          this.currY = e.pageY - canvas.offsetTop;
          draw();
        }
      }
    }
  }

未捕获引用错误:未定义标志
在findxy(jobs.self-09776D4C973306A74003EE614A19882DD0D4D402C0C72BBA61747EF44C6AB2B.js?body=1:191)

(匿名)@signature.self-e4f9a6f8d0069a7e6488dd64f3234fbdf4b0c2004f9de362da627d0176111f06.js?body=1:31

1 回复 | 直到 7 年前

Rory McCrossan Hsm Sharique Hasan 7 年前

作用域不随调用转移。你需要通过考试 this 引用作为参数:

this.canvas.addEventListener("mouseout", function (e) {
  findxy('out', e, this)
}, false); 

findxy(res, e, _this) {
  // call it something more appropriate than '_this' - this is just an example
  _this.prevY = ...;
}

call() 要提供一个范围:

this.canvas.addEventListener("mouseout", function (e) {
  findxy.call(this, 'out', e)
}, false);

或者使用jQuery替代 调用() ,即 $.proxy()

this.canvas.addEventListener("mouseout", function (e) {
  $.proxy(findxy, this, 'out', e)();
}, false);