Javascript - 如何访问事件函数中的对象属性？

Question

我是一个新手程序员。我想以OO方式创建我的脚本。但我想不出如何保护我的财产，并仍然能够访问它。问题是，我不能访问我的this.XXX性质的功能

this.handleStartEvent=function(event) 

在Firebug的错误消息：

"TypeError: this.imgContainer is undefined"

整个脚本如下：

var imageViewer=function(imageWrapper) 
{ 
    var hasTouch = 'ontouchstart' in window, 
    resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize', 
    startEvent = hasTouch ? 'touchstart' : 'mousedown', 
    moveEvent = hasTouch ? 'touchmove' : 'mousemove', 
    endEvent = hasTouch ? 'touchend' : 'mouseup', 
    cancelEvent = hasTouch ? 'touchcancel' : 'mouseup'; 

    this.imgContainer=imageWrapper; 
    this.image=imageWrapper.getElementsByTagName("img")[0]; 
    this.initScale=1; 
    this.scaleLevel=this.initScale; 
    this.startPoint={x:0,y:0} 

    //alert(this.image) 
    this.initEvents=function() 
    { 
     window.addEventListener(resizeEvent, this.resizeImageViewer, false); 
     this.imgContainer.addEventListener(startEvent, this.handleStartEvent, false); 
     this.imgContainer.addEventListener(moveEvent, this.handleMoveEvent, false); 
     this.imgContainer.addEventListener(endEvent, this.handleEndEvent, false); 
    } 

    this.resizeImageViewer=function(event) 
    { 
     /*not finish*/ 
    } 

    this.handleStartEvent=function(event) 
    { 
     /**********problem goes here*************/ 
     this.startPoint.x = event.offsetX || (event.pageX - this.imgContainer.offsetLeft); 
     this.startPoint.y = event.offsetY || (event.pageY - this.imgContainer.offsetTop); 
    } 

    this.handleMoveEvent=function(event) 
    { 
     /*not finish*/ 
    } 

    this.handleEndEvent=function() 
    { 
     /*not finish*/ 
    } 

    this.initEvents(); 
} 

var imageViewerObj = new imageViewer(document.getElementById("imageWrapper")); 

我知道this将是imgContainer，而不是imageViewer，但我不知道如何让我的imageViewer的属性lik e startPoint和initScale。有人能指导我一点吗？

Answer 1

如果你想保持参照this只是将其保存在其他变量：

var imageViewer = function(imageWrapper) 
{ 
    var self = this; // use "self" instead of "this" later 

    ... 

    self.startPoint={x:0,y:0} 

    self.initEvents=function() 
    { 
     window.addEventListener(resizeEvent, self.resizeImageViewer, false); 
     self.imgContainer.addEventListener(startEvent, self.handleStartEvent, false); 
     self.imgContainer.addEventListener(moveEvent, self.handleMoveEvent, false); 
     self.imgContainer.addEventListener(endEvent, self.handleEndEvent, false); 
    } 

    ... 

    self.initEvents(); 
} 

Answer 2

如果imgContainer是父母，那么你可以使用this.parent.getAttribute(...);如果一个孩子this.parent.getChildAt(index).getAttribute(...);

与您要选择的元素的数量（指数）更换指标。如果其第一个孩子如<div><div class="wannaselectthat"></div></div>将索引设置为零。