ugrás a tartalomhoz

Bubbling efektus JavaScript

Soolt · 2009. Dec. 12. (Szo), 20.33
A gondom a következő:

Tegyük fel van 2 DIV-em. Legyen A div, aminek a belsejében van egy láthatalan B div. Az A div onMouseOver eseményének hatására láthatóvá vállik a B div. A gondom az, hogy ha ráviszem az egeret a B div-re akkor létrejön az A div onMouseOut eseménye, holott tulajdonképpen még mindig benne van az egér az A divben hiszen a B div is benne van vagyis nem vittem le az egeret a szülő divről

---------------
|               |
|           ---------------
|          |               |
|       A  |       B       |
|          |               |
|           ---------------
|               |
 ---------------


Azt szeretném elérni, hogy a B div ismét eltünjön, ha az A divről lehúzom az egeret!
Tehát az onMouseOut eseménye az A divnek csak akkor jöjjön létre, ha az összes gyerekéről is levittem az egeret!

(Persze ezt bármekkora mélységig, mondjuk a B divben is lehet egy C div)


---------------
|               |
|           ---------------
|          |               |
|       A  |       B    ---------  
|          |           |    C    |
|           -----------|         |
|               |       ---------
 ---------------


Ahol a C div szintén láthatlan, amíg a B-re rá nem viszem az egeret és ha ráhúztam az egeret a B-ről C-re, akkor megint ne fusson le az onMouseOutja sem az A-nak sem a B-nek Viszont, ha a C-ről lehúzom jobbra az egert (tehát nem lessz rajta egyiken sem) akkor tünjön el C is és B is. Tahát úgy működjön mint egy simma legördülő menü, csak épp nem fussanak le a fölösleges események!
‹ onKeyPress backspace nem működik ie-ben iframe átlátszóság ›
 ■
1

CSS

toxin · 2009. Dec. 13. (V), 13.16
Tahát úgy működjön mint egy simma legördülő menü, csak épp nem fussanak le a fölösleges események!


most az a kérdés, hogy lehet a CSS alapú legördülő menüt javascript-el szimulálni, szóval 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <style type="text/css">
            
            ul {
                padding: 1px;
                margin: 0;
                list-style: none;
            }
            
            ul#first {
                width: 600px;
                height: 600px;
                background-color: red;
            }
            
            ul#second {
                width: 400px;
                height: 400px;
                margin: 100px 0 0 400px;
                background-color: blue;
                display: none;
            }
            
            ul#first:hover ul#second, ul#first.hover ul#second {
                display: block;
            }
            
            ul#third {
                width: 200px;
                height: 200px;
                margin: 100px 0 0 300px;
                background-color: green;
                display: none;
            }
            
            ul#second:hover ul#third, ul#second.hover ul#third {
                display: block;
            }
        </style>
        <script type="text/javascript">
            ie6hoverification = function(){
                var listElems = document.body.getElementsByTagName("UL");
                for (var i = 0; i < listElems.length; i++) {
                    listElems[i].onmouseover = function(){
                        this.className += " hover"
                    }
                    listElems[i].onmouseout = function(){
                        this.className = this.className.replace(new RegExp(" hover\\b"), "");
                    }
                }
            }
            if (window.attachEvent) 
                window.attachEvent("onload", ie6hoverification);
        </script>
    </head>
    <body>
        <ul id="first">
            <li>
                <ul id="second">
                    <li>
                        <ul id="third">
                            <li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>
magyarán div-el és javascript-el kéne megoldani CSS + egymásba ágyazott ul,li tag-okkal létrehozott legördülő menüt, mert minek amikor CSS-el ez level 1-es task...

üdv Csaba
2

Javascript menü

Soolt · 2009. Dec. 13. (V), 13.18
Javascriptel szeretném, mert a lista helyett divek lennének merta fenti példádban szereplő li tegekben egyéb dolgok is lennének és ugye IE-ben nem igazán lehet egyéb teget tenni a LI-be, mondjuk egy másik divet vagy akár egy egés html-ben formázott dolgot. Vagyis a formázhatóság miatt nem jó a lista.

Tudod semmi baj nem lenne, hogy lefutnak a gyerekek eseményei hatására a szülők azonos eseményei is, ha IE-ben nem érződne annyira a JavaScript kezelésének lassúsága. Mozillában tökéletesen megy és egyébben is persze, Opera... stb de az IE miatt valahogy ki kelle kerülnöm ezt a bubbling efektust. Mondjuk IE-ben is megy csak érződik, hogy lassú, ha nagya mélység. Mondjuk a C divben is vagy egy D dív
3

lista vagy nemlista

erenon · 2009. Dec. 13. (V), 16.15
1) Teljesen lényegtelen, hogy listát használsz vagy divet, a css megoldás szempontjából
2) Minden mehet az li elembe, IE-ben is, tisztességesen kell resetelni a tulajdonságait, vagy szükség esetén hackelni.

3) A legfontosabb: JS esetén kizárod a látogatóid közül azokat, akiknél nincs JS. Ez pedig a navigáció esetében nagyon kritikus, teljesen ellenjavallt. Ha tudod, csináld CSS-ben, crossbrowser JS-el _sokkal_ több szívás van.