I am a newbie programmer. I want to create my script in OO way. However I can't think of how to protect my properties and still be able to access it. The problem is that I cant access my this.XXX
properties in the function
this.handleStartEvent=function(event)
The error message in Firebug:
"TypeError: this.imgContainer is undefined"
The whole script is below:
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"));
I know that this
will be the imgContainer
, not the imageViewer
, but I don't know how to get my imageViewer
's properties like startPoint
and initScale
. Could someone guide me a little?
If you want to keep reference to this
just save it in other variable:
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();
}
If imgContainer is the parent then you can use this.parent.getAttribute(...);
if its a child this.parent.getChildAt( index ).getAttribute(...);
Replace index with the number (index) of the element you want to select. If its first child like <div><div class="wannaselectthat"></div></div>
set index to zero.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.