Problema con event handler onmousemove

[Jenexis]

Ragazzi sto scrivendo un motore graifco isometrico utilizzando le webGL.
Ho dei problemi ad aggiungere un listener onmousemove ad un oggetto.
Probabilmente è sbagliato il modo in cui creo i prototipi degli oggetti perfavore se qualcuno può spiegarmi cosa non funziona sarebbe una bella svolta per me perchè mi trovo bloccato.

Su questo sito è presente tutto il codice.

webgl isometric engine

il problema è alla riga 27 del file canvas.js
URL=http://engineofcreation.altervista.org/lib/jcie/Canvas.js]webgl isometric engine[/URL]

Grazie a tutti.

[artorius]

Il problema è che le funzioni associate agli Eventi hanno come scope l'oggetto window, non lo scope nel momento in cui vengono definiti. Puoi implementare una funzione chiamata bind, da chiamare al momento della definizione dell'evento:

http://snipplr.com/view/2756/bind/

il tuo codice diverrebbe

this.domElement.onmousemove=bind(function(event){
    //Offset in pixel del canvas rispetto all'angoli in alto a sx della pagina TODO considerare l'albero completo di oggetti parent
   if(event.pageX){
      var canvasOffset=new Array(this.domElement.parentNode.offsetLeft,this.domElement.parentNode.offsetTop);
      var mousePos=new Array(event.pageX-canvasOffset[0],event.pageY-canvasOffset[1]);
      if(this.tileMap!=null)
         alert(mousePos[0]+' '+mousePos[1]);
      else
         alert('no tilemap loaded');
   }
   //else TODO implementare compatibilità con IE7+
}.bind(this)

[Jenexis]

Grazie per l'interessamento, purtroppo, l'handler non è associabile soltanto all'oggetto window ma anche ad altri elementi del dom.
Se provi a mettere un alert all'interno della funzione si attiva quando il mouse si muove sull'area in questione.
Il problema è che non vede le propietà dell'oggetto, in tal caso this.tileMap.
Forse è sbagliata la priorità di inzializzazione dei vari elementi: aiuto! Mi serve supporto community!

[artorius]

No, allora, do per scontato che tu sappia cos'è lo scope.
Quello che intendevo è che quando associ all'evento di un elemento una funzione, lo scope della stessa, nel momento in cui viene lanciata, È L'ELEMENTO STESSO, NON lo scope nel momento in cui definisci la funzione.

Quindi, facendo:

this.domElement.onmousemove = function(e){
   ...
}

All'interno della funzione this NON è uguale all'esterno, ma è this.domElement, ovvero l'elemento al quale hai impostato l'evento.

Il link che ti ho postato offre la classica funzione per impostare lo scope nel quale una funzione deve essere eseguita, chiamando .bind(obj), all'interno della funzione il this non sarà più quello di default, ma obj.

Se non sono stato chiaro chiedi pure.

[Jenexis]

OK.
Nel mio caso io ho una funzione con n. attributi.
Facendo come dici te se quella funzione ha un metodo interno setto lo scope del metodo alla funzione che lo contiene.
Provato aggiungendo la funzione bind, ma cmq non funge.

[artorius]

Ho notato che la funzione che ti ho passato non si applica bene agli eventi, quindi ho preso spunto da MooTools e ne scritta un'altra (ovviamente, non devi importare MooTools basta che copi le funzioni).

Ti lascio comunque il bind perché secondo me ti può servire.

Function.prototype.bind = function (obj) {
	var fn = this;
	return function () {
		var args = [this];
		for (var i = 0, ix = arguments.length; i < ix; i++) {
			args.push(arguments[i]);
		}
	return fn.apply(obj, args);
	};
};

Function.prototype.bindWithEvent = function (obj) {
	var fn = this;
	return function (event) {
		var args = [event || window.event, this];
		for (var i = 0, ix = arguments.length; i < ix; i++) {
			args.push(arguments[i]);
		}
		
	return fn.apply(obj, args);
	};
};

Il tuo codice diventa poi:

this.domElement.onmousemove=function(event){
   //Offset in pixel del canvas rispetto all'angoli in alto a sx della pagina TODO considerare l'albero completo di oggetti parent
   if(event.pageX){
        var canvasOffset=new Array(this.domElement.parentNode.offsetLeft,this.domElement.parentNode.offsetTop);
        var mousePos=new Array(event.pageX-canvasOffset[0],event.pageY-canvasOffset[1]);
	if(this.tileMap!=null)
	   alert(mousePos[0]+' '+mousePos[1]);
	else
	   alert('no tilemap loaded');
   }
//else TODO implementare compatibilit‡ con IE7+
}.bindWithEvent(this);

P.S: credo che così funzioni anche su IE

[Jenexis]

IE non ha event.pageX

[artorius]

hu, scusa, in effetti hai ragione, su IE è clientX, se non sbaglio. Quello che intendevo è che con quel sistema dovrebbe passarti l'evento come argomento della funzione associata anche su IE.