ugrás a tartalomhoz

Javascript, setIntervallal bejegyzet fv futása nem áll le a clearIntervalra

fchris82 · 2008. Aug. 10. (V), 17.48
Már órák óta vacakolok egy scripttel és nem értem, hol a hiba. Van két div-em. Az #inner nagyobb, mint az #outer. Abban kéne mozgatni az #inner-t, az egér pozíciójától függően. Ha az egér 30px-nél jobban megközelíti az #outer szélét, akkor a megfelelő irányba tologatja az #inner-t, amíg az egér ismét el nem távolodik 30px-nél jobban a széltől.

CSS:

#outer {
 width: 600px;
 height: 400px;
 overflow: hidden;
 position: absolute;
}

#inner {
 position: absolute;
}
HTML:

<div id="outer" onMouseMove="mouseMoveHandler">
  <div id="inner">
    Vmi tartalom....
  </div>
</div>
JS:

var moveInterval = 0;

function mouseMoveHandler(e) {
    container = document.getElementById('outer');
    mX        = getElementMouseX(container, e);
    mY        = getElementMouseY(container, e);

    document.test.n.value = mX;
    document.test.m.value = mY;

    /* A */
    if(mX<30 || mY<30)
    {
      moveX = (mX<30) ? 30-mX : 0;
      moveY = (mY<30) ? 30-mY : 0;
      moveInterval = window.setInterval(moveInner, 100, moveX, moveY);
      /* B */
    } else {
      /* C */
    }
}

function moveInner(intervalX, intervalY) {
    var inner = document.getElementById('inner');
    inner.style.left = inner.offsetLeft+intervalX+'px';
    inner.style.top  = inner.offsetTop+intervalY+'px';
    window.clearInterval(moveInterval);  /* D */
}
Nos, ha a clearInterval (D komment) sor nem a B helyen van, akkor az "úsztatás" végtelen ciklusba kerül, és az #inner "elúszik". Ha a B helyen van, akkor meg meg se moccan. Amint látható, mindenfélét megpróbáltam már kiiratni, hogy megtaláljam a hibát, de nem megy :-/ Miért nem áll le az úsztatás, ha az egér ismét eltávolodik a széltől?

Kiegészítés, teszteléshez, ami az átláthatóság miatt az előzőkből kimaradt:

function getElementMouseX(obj, e)
  {
    var xcoord = (typeof(e.pageX)=='number') ? e.pageX : e.clientX+document.body.scrollLeft;
    xcoord = xcoord - getElementX(obj);
    return xcoord;
  }

  function getElementMouseY(obj, e)
  {
    var ycoord = (typeof(e.pageY)=='number') ? e.pageY : e.clientY+document.body.scrollTop;
    ycoord = ycoord - getElementY(obj);
    return ycoord;
  }
‹ Objektum végén a "();" mit jelent? Nem működik az onmouseover ajax-nál! ›
 ■
1

Kimaradt

fchris82 · 2008. Aug. 10. (V), 17.52

  function getElementY(obj)
  {
    top = 0;
    if (obj.offsetParent) {
  	  do {
		  	top += obj.offsetTop;
			} while (obj = obj.offsetParent);
    }

	  return top;
  }

  function getElementX(obj)
  {
    left = 0;
    if (obj.offsetParent) {
  	  do {
		  	left += obj.offsetLeft;
			} while (obj = obj.offsetParent);
    }

	  return left;
  }
2

Szerintem a 'var' a gond.

Velias9 · 2008. Aug. 11. (H), 16.21
Nem vagyok benne 100%-osan biztos, de ha így:
var moveInterval = 0;
hozod létre a 'moveInterval' változót, akkor nem fog illeszkedni a 'window' objektumhoz és nem lesz elérhető a függvényeken belül.
Lehet, hogy segíteni fog, ha a 16. sort átírod így:
window.moveInterval = window.setInterval(moveInner, 100, moveX, moveY);
, persze csak akkor, ha az első sort átírtad.
Nem biztos, hogy működik, de érdemes megpróbálni.
Egy jótanács: használj kisbetűs eseménykezelőneveket, mert ez a szabványos és néhány esetben nem működik ez a módszer.

Remélem segítettem.