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>將索引設置爲零。