[js] methode na event neemt eigenschappen niet over?

[Plankje]

Ola,

Ik ben bezig om een script te schrijven waar onder andere een div-element in verplaatst moet kunnen worden. Hieronder een versimpelde versie die is aangepast om het probleem overzichtelijk te houden:

code:

        function scrollbar () 
        {
          this.offsetY = 10;

          this.move = function (event) 
          {
// bewegen 

            return this.offsetY; // geeft undefined
          }

          this.drag = function (event) 
          { 
            var captEvent = window.event ? window.event : event;

            // Schakel de standaardevents van de webbrowser uit
            if ( captEvent.preventDefault ) { captEvent.preventDefault (); }
            document.onmousemove = scrollbar.move;
          }

          this.initialize = function ()
          {
            document.onmousedown = this.drag;
          }
        }

       var scrollbar = new scrollbar ();
       scrollbar.initialize ();

Zoals je ziet wordt de methode "move" in "drag" aangeroepen via de volledige naam: "scrollbar.move". De methode "move" kan op die plek niet aangesproken via "this.move", omdat (zo vermoed ik althans) bij het instellen van de event listener "document.onmousemove = scrollbar.move" het focus van op het object "scrollbar" verschuift naar "document"(.onmousemove anders?).
Nou is dit op zich nog niet zo'n groot probleem, omdat het werkt. Echter, nu wil ik in "this.move" de eigenschap "this.offsetY" oproepen. Het komt erop neer dat ik ook in de functie "move" eigenschappen van het object "scrollbar" nodig heb. Het lijkt mij het handigst door dit via een directe benadering met "this" te doen, dus dat die methoden die worden uitgevoerd na een event de eigenschappen en methoden overnemen van de klasse "scrollbar".

Op internet vond ik een script dat kwa functionaliteit en opbouw aardig overeenkomt met mijn stuk code:

code:

var dragobject = {
  z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
  
  initialize:function() {
    document.onmousedown = this.drag
    document.onmouseup = function () { this.dragapproved=0 }
  },

  drag:function(e) {
    var evtobj = window.event ? window.event : e
    this.targetobj = window.event ? event.srcElement : e.target

    if ( this.targetobj.className=="drag" ) {
      this.dragapproved = 1
      if ( isNaN (parseInt (this.targetobj.style.left) ) ) {
        this.targetobj.style.left = 0
      }

      if ( isNaN (parseInt (this.targetobj.style.top) ) ) {
        this.targetobj.style.top = 0
      }

      this.offsetx = parseInt (this.targetobj.style.left)
      this.offsety = parseInt (this.targetobj.style.top)
      this.x = evtobj.clientX
      this.y = evtobj.clientY
      if (evtobj.preventDefault)
      evtobj.preventDefault ()
      document.onmousemove = dragobject.moveit
    }
  },

  moveit:function(e)
  {
    var evtobj = window.event ? window.event : e

    if (this.dragapproved == 1) {
      this.targetobj.style.left = this.offsetx+evtobj.clientX-this.x+"px"
      this.targetobj.style.top = this.offsety+evtobj.clientY-this.y+"px"
      return false
    }
  }
}

dragobject.initialize()

Zoals je ziet heeft dit script ook een object-georiënteerde opbouw, alleen is de constructie anders, omdat hier het object wordt geconstrueerd in een variabele en niet, zoals in mijn script, in een functie. Echter, dit script kan wel in de functie "moveit ()" eigenschappen van de klasse "dragobject" opvragen. Dat is dus wat mijn script ook moet kunnen.

Ik heb ondertussen al het hele internet (inclusief got) afgestruind om uit te vinden waarom het in dit script wel kan en in mijn script niet. Ligt het misschien aan de manier waarop het object wordt geconstrueerd?
Ook heb ik met verschillende opstellingen gekeken of "prototype" of "apply ()" het probleem kon oplossen, maar dat mocht niet baten.

Wellicht dat 1 van jullie weet hoe ik de eigenschappen van het object "scrollbar" worden overgenomen in "this.move" als deze wordt uitgevoerd naar aanleiding van een event in "document"?

Alvast bedankt

[Verwijderd]

zoek eens op scoping en closures

[Bosmonster]

code:

... {
this.initialize = function (sbObj)
          {
            document.onmousedown = sbObj.drag;
          }
        }

       var scrollbar = new scrollbar ();
       scrollbar.initialize (scrollbar);

En een dergelijke constructie om te voorkomen dat lokale en globale functies door elkaar gaan lopen?

Mn javascript is wat roestig

[ Voor 4% gewijzigd door Bosmonster op 13-02-2008 09:33 ]

[Plankje]

Bosmonster schreef op woensdag 13 februari 2008 @ 09:32:

code:

... {
this.initialize = function (sbObj)
          {
            document.onmousedown = sbObj.drag;
          }
        }

       var scrollbar = new scrollbar ();
       scrollbar.initialize (scrollbar);

En een dergelijke constructie om te voorkomen dat lokale en globale functies door elkaar gaan lopen?

Mn javascript is wat roestig

Nope, dit werkt niet... ik had inderdaad op een aantal websites al iets gevonden over dat een methode eigenschappen kon overnemen met behulp van argumenten, maar blijkbaar werkt dat niet in dit geval.

@mophor: ik had eerder al gezocht naar scoping, maar het is mij onduidelijk gebleven (1) waarom mijn script niet werkt en die ik op internet vond wel en (2) wat ik moet doen om mijn script op een schone en juiste manier werkend te krijgen.

[Verwijderd]

je move method is geen method van scrollbar, maar van de instantie van scrollbar, je moet dus naar de instantie verwijzen. Dat is niet "this" dus moet je met een closure een referentie naar de instantie bewaren (niet belangrijke dingen even weggelaten), verder wordt de move method een method van document, dus "this" verwijst in dat geval ook niet naar je instantie. Dus je moet "move" aanroepen in de scope van je instantie, "self" dus:

JavaScript:

function scrollbar() {
  this.move = function(){};
  var self = this;                      //<- maak een referentie naar zichzelf
  this.drag = function() {
    document.onmousemove = function(){self.move();}   //<- hier maak je gebruik van een closure
  }
  this.init = function() {
    document.onmousedown = this.drag;
  }
}

[ Voor 77% gewijzigd door Verwijderd op 13-02-2008 12:03 ]

[Bosmonster]

Verwijderd schreef op woensdag 13 februari 2008 @ 11:13:
je move method is geen method van scrollbar, maar van de instantie van scrollbar, je moet dus naar de instantie verwijzen. Dat is niet "this" dus moet je met een closure een referentie naar de instantie bewaren (niet belangrijke dingen even weggelaten), verder wordt de move method een method van document, dus "this" verwijst in dat geval ook niet naar je instantie. Dus je moet "move" aanroepen in de scope van je instantie, "self" dus:

JavaScript:

function scrollbar() {
  this.move = function(){};
  var self = this;                      //<- maak een referentie naar zichzelf
  this.drag = function() {
    document.onmousemove = self.move.call(self);   //<- hier maak je gebruik van een closure
  }
  this.init = function() {
    document.onmousedown = this.drag;
  }
}

Dan zou mijn wat minder mooie methode toch ook moeten werken?

[Verwijderd]

als je

JavaScript:

document.onmousedown = function(){sbObj.drag()}

doet ja

NOTE: had een foutje gemaakt, is geupdated

[ Voor 3% gewijzigd door Verwijderd op 13-02-2008 12:03 ]