[JS] functie in functie

[TheWickedD]

Sorry, voor mijn beperkte javascriptkennis, maar hier een vraag:

Ik heb op het internet de volgende code gevonden die de positie van de muiscursor afvangt en weergeeft:

HTML:

<form name=exf1>
<table border=1>
<tr><td colspan=2>Position Of Cursor</td></tr>
<tr><td>X <input type=text name=x value="<unknown>"></td>
    <td>Y <input type=text name=y value="<unknown>"></td>
</tr>
</table>
</form>
<script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
    _y = event.clientY + document.body.scrollTop;
  }
  document.exf1.x.value=_x;
  document.exf1.y.value=_y;
  return true;
}
</script>

werkt hardstikke mooi. Nu wil ik dit om gaan bouwen tot stukje script waarmee ik de x en y coordinaten van de muis elke x msec aan een array toevoeg (waarom is een lang verhaal). Ik ben dus bezig dit stap voor stap om te schrijven. Omdat een JS functie, voor zover ik weet, maar 1 waarde terug kan geven, moet ik de x en de y in aparte functies meten.
Het hieronderstaande werkt echter niet en ik zie niet waar het fout gaat. Bedankt voor de hulp!
Kun je in javascript trouwens matrices maken of alleen maar rowvectors? Op zoek naar een antwoord kwam ik dit mooie matrixeffect tegen, maar geen antwoord helaas.

HTML:

<form name=exf1>
<table border=1>
<tr><td colspan=2>Position Of Cursor</td></tr>
<tr><td>X <input type=text name=x value="<unknown>"></td>
    <td>Y <input type=text name=y value="<unknown>"></td>
</tr>
</table>
</form>
<script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = dummyfunction();
function dummyfunction() {
  document.exf1.x.value = getMousePositionx(e);
  document.exf1.y.value = getMousePositiony(e);
}
function getMousePositionx(e) {
  var _x;
  if (!isIE) {
    _x = e.pageX;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
  }
  return _x;
}
function getMousePositiony(e) {
  var _y;
  if (!isIE) {
    _y = e.pageY;
  }
  if (isIE) {
    _y = event.clientY + document.body.scrollTop;
  }
  return _y;
}
</script>

[NetForce1]

Je kunt ook een object teruggeven waar deze waardes inzitten:

JavaScript:

funtion getMousePosition(e) {
  var _x, _y;
  if (isIE) {
    _x = e.clientX + document.body.scrollLeft;
    _y = e.clientY + document.body.scrollTop;
  } else {
    _x = e.pageX;
    _y = e.pageY;
  }
  return {x: _x, y: _y};
}

Of je maakt een Point class, helemaal mooi
Dit kun je dan als volgt aanspreken:

JavaScript:

var pos = getMousePosition(e);
alert("x: " + pos.x + ", y: " + pos.y);

Verder gebruik je voor ie event, terwijl je als argument e meekrijgt, wellicht dat daar wat fout gaat.

Je kunt in JavaScript ook meerdimensionale arrays gebruiken overigens.

JavaScript:

var array = new Array();
array[0] = new Array();
array[0][0] = "element 0, 0";

[ Voor 24% gewijzigd door NetForce1 op 25-04-2007 15:02 . Reden: uitleg hoe te gebruiken ]

[TheWickedD]

Hoi Netforce1, bedankt voor je antwoord!

ik heb nu dus onderstaande code, maar ik geloof dat ik er inderdaad tegenaanloop dat ik een event gebruik terwijl ik tegen event creer ofzo. Javascript is nogal een andere taal dan wat ik gewend ben

Goed, ik geloof dat ik in onderstaand script nog iets nodig heb om hem in beweging te krijgen, maar snap eigenlijk niet helemaal hoe dit in zijn werk zou gaan. Ik wil eigenlijk van het hele event ding af omdat ik hem periodiek aan wil roepen. Ik zie dat clientX, een property is van een event. Is er dan een manier om zelf periodiek een event te creeren, zodat ik clientX etc uit kan lezen ten tijde van het event? (het periodieke bouw ik later in met een simpele while loop, eerst dit maar eens werkend krijgen). Ik heb trouwen het gehele niet IE gedeelte eruit gegooid omdat het toch alleen maar op IE hoeft te werken (bekende omgeving waarin dit gaat draaien).
Bednakt nogmaals!

JavaScript:

var pos = getMousePosition;
alert("x: " + pos.x + ", y: " + pos.y);

funtion getMousePosition(e) {
  var _x, _y;
    _x = e.clientX + document.body.scrollLeft;
    _y = e.clientY + document.body.scrollTop;
  return {x: _x, y: _y};
}

[NetForce1]

Dan moet je dus luisteren op mousemove events

[TheWickedD]

Hmm, ik heb nu onderstaande code.
Helaas is hier nog geen leven in te krijgen. gebruik ik het event nu op een verkeerde manier?

Ik weet niet hoe ik met een regel zoals document.onmousemove = getMousePosition; ook het resultaat van getMousePosition in var pos kan opslaan en kan dit ook niet vinden helaas. var pos = getMousePosition(document.onmousemove); lijkt dus niet te werken

JavaScript:

var teller = 0;
var coord = new Array();
coord[0] = new Array();


var pos = getMousePosition(document.onmousemove);

if ((pos.x != coord[teller-1][0]) | (pos.y != coord[teller-1][1])) {
  coord[teller][0] = pos.x;
  coord[teller][1] = pos.y;
  alert("x: " + pos.x + ", y: " + pos.y);
  teller++;
}

funtion getMousePosition(event) {
  var _x, _y;
  _x = event.clientX + document.body.scrollLeft;
  _y = event.clientY + document.body.scrollTop;
  return {x: _x, y: _y};
}

[crisp]

Misschien heb je hier wat aan:

JavaScript:

var mouseTracker = function()
{
    var x = 0, y = 0;
    var cursorArray = [];

    function trackMouse(e)
    {
        e = e || event;
        x = e.clientX + document.body.scrollLeft; 
        y = e.clientY + document.body.scrollTop; 
    }

    function storeMouse()
    {
        cursorArray.push({x:x,y:y});
        window.status = 'x: ' + x + ', y:' + y;
    }

    document.onmousemove = trackMouse;
    setInterval(storeMouse, 1000);

    return function()
    {
        return cursorArray;
    }
}();

setTimeout('alert(mouseTracker().length)', 11000);

Deze slaat elke seconde de muis-positie op in een array (en toont hem ook in de statusbalk), bij het aanroepen van mouseTracker() krijg je die array terug

[TheWickedD]

Hoi Crisp,

Bedankt! Deze doet precies wat ik zocht.