[js] afvangen mouse-events icm doorgeven andere argument

[marty]

Ik ben wat aan het spelen met drag-functies. Nou is het opzich al gelukt, ik ben alleen niet zo blij met de code, omdat nu een hoop via globale variabelen gaat. Het lukt me niet de code in deze zin op te schonen door het volgende probleem.

als ik dit doe

JavaScript:

function doDrag(e)
{

}
document.getElementById('someID').onmousedown=drags;

gaat dat prima in bijv. firefox. de variabele e kan ik dan binnen de doDrag functie uitlezen en daar de mouse-coordinaten uithalen bijv.. Maar, het probleem is dat ik het op deze manier niet voor elkaar krijg andere argumenten aan doDrag() door te spelen, omdat ik dan die variabele e kwijtraak...

In IE is dit geen probleem omdat de variabele event altijd beschikbaar is. Maar in bijv. firefox dus niet.

Ik heb bewust geen code geplaats, want zoals ik al zei: ik heb het geheel al werkend, dat is het probleem niet. En primair gaat het me ook niet om het opschonen van m'n eigen code. Ik ben nu alleen geinteresseerd in hoe je binnen bijv. firefox in deze simpele opzet meer argumenten aan doDrag() kan geven, waarbij je toch over een variabele beschikt waaruit je bijv. de mouse-coordinaten kunt halen (e.clientX en e.clientY). Ik heb namelijk al flink zitten zoeken op internet, maar alle tuts en voorbeelden die ik vind maken gebruik van deze constructie.

[crisp]

Je geeft zelf al aan dat de globale variabelen een probleem zijn. Me dunkt dat je dus ook al hebt ingezien dat dat problemen gaat geven indien je bijvoorbeeld meerdere draggable objects wilt gaan gebruiken op 1 pagina...

En daarom is er ook OO; maak een 'Draggable' class en je kan zonder problemen nieuwe instances aanmaken. Eventuele benodigde variabelen kan je dan prima in je class instance bewaren. Eventhandlers kan je uit laten voeren in de scope van je instance en hebben dan meteen toegang tot die variabelen

[marty]

ok, maar moet ik daar uit afleiden dat wat ik eigenlijk wilde gewoonweg niet mogelijk is?
Het lijkt mij namelijk het meest eenvoudige en meest nette om gewoon een mousedown voor een element te definieren waarbij je als argument kunt meegeven om welk element het gaat.

dus in mijn eerdere voorbeeld:

JavaScript:

function doDrag(e, tgtID)
{
    ; // making document.getElementById('tgtID') draggable
}
document.getElementById('someID').onmousedown=doDrag(mouseEvent, targetID);

maar zo'n constructie is dus niet mogelijk?

[keisersose]

Als je alleen de event en het element nodig hebt, heb je aan dit volgens mij genoeg:

JavaScript:

function doDrag(e) 
{ 
   if (!e) var e = window.event;
   if (!e.target) e.target = e.srcElement;

   // e.target is nu in IE en Firefox het element waar de event gebeurde

   // En dan kan je hier met je element en mouse positions verder
} 
document.getElementById('someID').onmousedown=doDrag;

En een goede cross-browser manier om de mouse position uit te lezen kan je zo doen:

JavaScript:

if (e.pageX || e.pageY)
{
   posx = e.pageX;
   posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
   posx = e.clientX + document.body.scrollLeft
      + document.documentElement.scrollLeft;
   posy = e.clientY + document.body.scrollTop
      + document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document

Een goede site met informatie hierover is hier te vinden:
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_properties.html

[marty]

@ keisersose bedankt dat je meedenkt, maar lees de startpost nog een keer.
Het probleem is juist dat dit wel lukt, maar dat ik ook andere argumenten aan doDrag() wil kunnen meegeven.

[crisp]

event.target/srcElement hoeft niet noodzakelijk het element te zijn wat ook de handler gedefinieerd heeft.

Anyway, het is vrij eenvoudig op te lossen hoor mbv een anonymous function en closures:

JavaScript:

{
  var foo = 'foo';
  var bar = 'bar';
  document.getElementById('someID').onmousedown = function(e) { drags(foo, bar, e); };
}