Question

function getPoint ( id ){

    this.point = null

    document. getElementById( id ).addEventListener( 'mousemove', function(i) {
        this.point = i.clientX - i.target.getBoundingClientRect().left    
        console.log( 'this is' + this.point)
    } , false )

}

test = new getPoint ( 'testID' )

setInterval( function(){console.log( 'instance is' + test.point)}, 100 )

我想从canvasID创建实例并获取该画布内的光标坐标。在这种情况下，console.log说＆＃39;实例未定义，这是123＆＃39;但我无法理解为什么test.point未定义＆＃39;因为我认为＆＃39; this.point＆＃39;与＆＃39; test.point＆＃39;相同。

请告诉我如何添加＆＃39; .addEventListener＆＃39;实例动态。

我希望语法错误很少。

Answer 1

事件处理程序回调中的

this与this中的getPoint不同;相反，它将是对元素的引用。

您可以使用变量来记住this是什么，然后在处理程序中使用它（请参阅下面的self）：

function getPoint ( id ){
    var self = this;

    self.point = null

    document. getElementById( id ).addEventListener( 'mousemove', function(i) {
        self.point = i.clientX - i.target.getBoundingClientRect().left    
        console.log( 'this is' + self.point)
    } , false )

}

我的博客上有关this的更多信息：You must remember this

如何获取画布内光标的坐标

1 个答案: