[JS] Style aanpassen in onmouseover = dode onmousedown?

[Koetjeboe]

Ok, vaag probleempje...

Het probleemsel

Directe link naar de code files mochten mensen na onderstaande lap tekst nog behoefte hebben aan meer code:
Map.js
Init.js
Units.js (minder interessant voor het probleem)


Als je hier over de tiles gaat zie je een probleem met het selectievierkant, dit is niet het echte probleem, de y-as staat even uit om iets wel te laten werken, namelijk, ja, klik maar eens. Dan blijft er een vierkantje steken en komt er rechts mooie info te staan. Een werkende versie staat nu op deze plek

Nu even wat relevante code om het probleem te laten zien:

code:

    // onclick om iets te kunnen selecteren
    mapArray[i].onmousedown = function()
    {
        selectSquareSelected.style.left = this.style.left;
        selectSquareSelected.style.top = this.style.top;
        selectSquareSelected.style.visibility = 'visible';
        tileInfo.innerHTML = "Land-type: " + tileNames[this.type];
        tileInfo.innerHTML += "<br />Extra defense value: +" + tileDefVal[this.type];
    }
    
    // onmouseover voor het selectvierkant  
    mapArray[i].onmouseover = function()
    {
        selectSquare.style.left = this.style.left;
        //selectSquare.style.top = this.style.top;
        selectSquare.style.visibility = 'visible';
    }

Dit blok code is om de selectievierkantjes goed te updaten als je beweegt met je muis of klikt. Merk op dat in het onderste event, onmouseover, een regel uitgecomment is. Als we dit nu even weer activeren dan gaat de onmousedown, daarboven, kapot...hij komt er niet meer....huh? Het ene event lijkt het andere te mollen

Nouja, ok, kan gebeuren, gaan we beetje kijken waar het probleem ligt, even wat probeersels (van de onmouseover)

code:

    // onmouseover voor het selectvierkant  
    mapArray[i].onmouseover = function()
    {
        //selectSquare.style.left = this.style.left;
        selectSquare.style.top = this.style.top;
        selectSquare.style.visibility = 'visible';
    }

(andere regel uitgecomment) Werkt ook niet

code:

    // onmouseover voor het selectvierkant  
    mapArray[i].onmouseover = function()
    {
        selectSquare.style.left = this.style.left;
        selectSquare.style.top = this.style.left;
        selectSquare.style.visibility = 'visible';
    }

(2x zelfde style) -> werkt wel

Ligt het dan aan 2x een andere this.style.iets aanroep? Nouja, ok, gaan we proberen:

code:

    // onmouseover voor het selectvierkant  
    mapArray[i].onmouseover = function()
    {
        a = this.style.left;
        b = this.style.top;
        //selectSquare.style.left = a;
        //selectSquare.style.top = b;
        selectSquare.style.visibility = 'visible';
    }

Nu werkt onmousedown weer wel, als we echter de 2 regels weer activeren werkt de onmousedown weer niet...het lijkt dus te liggen aan het toepassen van de ene style op de andere, in combinatie met elkaar (want los werken ze)....

Verder doet dit probleem zich voor in IE en in FireFox, probleem zal dus wel bij mij ergens liggen...maar ik heb geen flauw idee wat het kan zijn

[ Voor 3% gewijzigd door Koetjeboe op 07-06-2005 11:01 ]

[crisp]

Je event bubbled; je moet dus goed kijken waar je this keyword naar verwijst...

[Koetjeboe]

crisp schreef op maandag 06 juni 2005 @ 23:23:
Je event bubbled; je moet dus goed kijken waar je this keyword naar verwijst...

Maar kun je dan ook verklaren waarom het wel/niet werkt door die dingen die ik verander? Maar ik zal even daarnaartoe kijken, kijken of ik daar nog iets over kan vinden...

[edit]
Als ik this even print in de mouseover events dan krijg ik toch telkens mooi te zien dat het een 'divelement' is, wat me correct lijkt...

[ Voor 18% gewijzigd door Koetjeboe op 06-06-2005 23:32 ]

[crisp]

mmz, het licht toch wat ingewikkelder; je mousemove wordt wel op beide elementen (je 'cursor' en je 'map' getriggered) echter ligt het met onmousedown (en onclick for that matter) wat anders: je 'cursor' is absoluut gepositioneerd en zit dus niet in de flow, hierdoor is er van bubbling (of capturing) geen sprake omdat je 'map' geen parent is van je 'cursor'.

testcase:

HTML:

<html>
<head>
<style type="text/css">

#tile {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
#cursor {
    width: 90px;
    height: 90px;
    background-color: blue;
    position: absolute;
    top: 6px;
    left: 6px;
    
}

</style>
</head>
<body id="body">
<div style="position:relative">
    <div id="tile"></div>
    <div id="cursor"></div>
</div>
<script type="text/javascript">

var tile = document.getElementById('tile');
tile.onmousemove = function() { window.status = 'move: ' + this.id; }
tile.onmousedown = function() { alert('down op ' + this.id);window.status = 'down: ' + this.id; }

var cursor = document.getElementById('cursor');
cursor.onmousedown = function() { alert('down op ' + this.id);window.status = 'down: ' + this.id; }

document.body.onmousedown = function() { alert('down op ' + this.id);window.status = 'down: ' + this.id; }

</script>
</body>
</html>

note hoe een click op het blauwe vlak eerst een mousedown registreert op de 'cursor' en vervolgens op de 'body', maar niet op de 'tile'.

[ Voor 61% gewijzigd door crisp op 06-06-2005 23:55 ]

[Koetjeboe]

Ow damn, ja ik snap nu in de ochtend pas wat je bedoeld Als het selectievierkantje goed gaat zit ik daar op te klikken ipv op de map zelf, en dan triggered hij niet natuurlijk, stom van me. Zal eens kijken wat ik daar aan kan doen.

[edit] Hij werkt nu zoals hij zou moeten doen, heb 1 ding wel minder mooi opgelost..

Ik van nu de onmousedowns op in de selectSquare (init.js). Maar omdat hij op units zo ook niet triggered doorloop ik in de selectSquare.onmousedown even alle units om te kijken of ze onder de muis zitten...

[ Voor 39% gewijzigd door Koetjeboe op 07-06-2005 11:01 ]