mouseout len na div

Merlin_sk · Napísal **Merlin_sk**: 04.05.2010 22:11

mam takyto zdrojak

Kód:

<div id="div1" style="margin: 50px; width: 500px; height: 500px; border: 1px solid black;" onmouseout="alert('mouseout');">

    <div id="div2" style="width: 300px; height: 300px; border: 1px solid red;">
    
        <div id="div3" style="width: 200px; height: 200px; border: 1px solid green;">
        
        </div>
    
    </div>

</div>

cize mam 3 divka...najvacsie, v nom mensie (stredne) a v nom este mensie...

chcem aby sa mi iba po odideni mysou z priestoru najvacsieho div vyvolala onmouseout...teraz sa generuje aj ked prejdem mysou z najmensieho div na stredne div...

prosim o pomoc, bo s tim neviem pohnut...dakujem

Ďuri · Napísal **Ďuri**: 05.05.2010 13:35

Ako dobre vies Javascript? V Event objekte (co je v niektorych prehliadacoch prvy parameter udalosti a v niektorych globalny objekt window.event) pohladaj atribut target ci srcElement ci mozno este inak

(nazvy tohto sa takisto mozu lisit) a tento si porovnaj s tvojim <div>om. Asi som sa vyjadril ako blb, takze ti ten kod napisem.
Explorer zaviedol velmi dobre udalosti mouseenter a mouseleave, ktore sluzia presne na to, co by si potreboval, ale bohuzial podpora v inych prehliadacoch je zrejme nulova.
.
.
No, tak som sa s tym potrapil, aj som zistil, ze som pisal blbosti, kedze target/srcElement je objekt, kde udalost nastala (co je pre nas zbytocne), potrebujeme zistit, kde je mys po odideni, a to je v atribute relatedTarget/toElement. Odporucam pozriet stranku quirksmode.org, je tam vela uzitocnych veci aj na tuto temu. Toto by malo fungovat:

Kód:

var div1 = document.getElementById('div1');
div1.onmouseout = function(e)
{
   var e = e || window.event,
      t = e.relatedTarget || e.toElement,
      p = this.parentNode;
   while (p)
   {
      if (t == p)
      {
         alert('mouseout!'); //sem ide tvoj kod na vykonanie
         return;
      }
      p = p.parentNode;
   }
}

Neviem, chces k tomu kodu aj blizsi popis?

camo · Napísal **camo**: 05.05.2010 22:52

Ja by som si poprosil ak dovolíte....
Celkom ma to zaujíma, ale nechápem...
Prečo normálne nealertuje?

Merlin_sk · Napísal autor témy **Merlin_sk**: 05.05.2010 23:16

dakujem duri...trochu som sa pohral s tvojim kodom, precital nejaky manual o tom...a riesenie som vymyslel taketo...

Kód:

function mouseOutAction(event) {
    var event = event || window.event;
    var target = document.getElementById('div1'); //ID elementu, ktoreho mouseout chceme zachytit
    var relatedTarget = (event.relatedTarget) ? event.relatedTarget : event.toElement;

    while (relatedTarget != target && relatedTarget.nodeName != 'BODY' && relatedTarget.nodeName != 'HTML') {
      relatedTarget= relatedTarget.parentNode
    }
    
    if (relatedTarget == target) return;

    alert('akcia na onmouseout pre id=div1');
  }

popis: zistis relatedTarget, co je element ktory vyvolal udalost onmouseout...moze to byt potomok tvojho elementu, ale moze to byt element mimo tvojho elementu...

potom v cykle hladam ci relatedTarget je potomok sledovaneho elementu...to sa zistuje tim ze prechadzas rodicovske vetvy pokial sa nedostanes na tvoj sledovany element, alebo na zaciatok dokumentu (BODY resp. HTML, ak udalost vyvolal BODY tag) ak je to pravda, tak to znamena ze kurzor sa nachadza vo vnutri sledovaneho elementu...a teda to nie je to co hladame...

dufam ze som to dobre vysvetlil...staci to len skopirovat a potom sa to pochopi

camo · Napísal **camo**: 15.05.2010 21:22

No dík za snahu...

Merlin_sk · Napísal autor témy **Merlin_sk**: 15.05.2010 22:40

nejako som nepochopil...nieco ti stale nefunguje?

pretoze ta veta NO DIK ZA SNAHU evokuje nieco nejasne

camo · Napísal **camo**: 15.05.2010 22:42

Ja to nepotrebujem použiť, len som chcel vedieť ako na to, čo a prečo tak funguje.
Nič sa nedeje, podstatu tam vidím a ostatné je vec mojich vedomostí(zatiaľ nedostatočných).....

Ďuri · Napísal **Ďuri**: 16.05.2010 10:50

No takze - kazda udalost ma objekt udalosti, v Exploreri v globalnom objekte window.event, v ostatnych prehliadacoch v prvom parametri obsluhy udalosti (tej fcie). Potrebujeme zistit, na ktory element mys presla => vytiahneme z objektu udalosti atribut relatedTarget alebo toElement, takisto sa to lisi medzi prehliadacmi.
Dalej by malo ist o to, ze kontrolujes, ci ten relatedTarget je niektorym z nadradenych elementov. Mozes pozriet, ako som ten cyklus zapisal ja, premenna p je najprv parentNode toho divu, potom parentNode toho parentNode, atd., potom <body>, potom <html>, document az nakoniec window. Ked ktorakolvek z tychto hodnot je zaroven relatedTarget, vykona sa kod. Merlin_sk to riesil zasa inak, on kontroluje, ci relatedTarget nema za nadradeny element ten element, na ktorom udalost nastala => ak ano, vtedy sa kod nevykona, lebo mys usla na niektory z podradenych elementov. Trosku by sa tam tie podmienky mohli dat upravit.
Snad to je uz jasnejsie, mozes sa este opytat, ak je nieco nejasne.
Ako som uz v uvode povedal, miesto tohto zdlhaveho kodu by sa dali pouzit propertialne udalosti onmouseenter, resp. onmouseleave, ale podpora je zatial slabsia.

Merlin_sk · Napísal autor témy **Merlin_sk**: 16.05.2010 11:07

co konkretne by si upravil na podmienkach?

Ďuri · Napísal **Ďuri**: 16.05.2010 11:55

Nejak mi tam nesedi ten zapis, ze cyklus prebieha, kym relatedTarget != target a vzapati este raz skontrolujes, ci naozaj relatedTarget == target, co by tam nemuselo byt, keby si to netestoval na body alebo html. Nie ze by to bolo zle, len sa mi to nejak nezdalo. Ta kontrola na body alebo html by sa mozno dala premiestnit niekam inam a tak by sa to zjednodusilo. Samozrejme je to funkcne, moze kludne ostat.
Jo a mimochodom, miesto premennej target si mohol pouzivat rovno this, kedze tu fciu zrejme priradujes k onmouseout toho elementu.

Merlin_sk · Napísal autor témy **Merlin_sk**: 16.05.2010 13:44

praveze ten test je tam podstatny...bez toho testu by to nefungovalo tak ako ma...

pretoze ked skutocne pohnes mysou vedla elementu DIV1, tak parentNode nebude "target" ale BODY resp. HTML...

a po cykle zistis ci si sa dostal k sledovanemu DIV1 a teda onmouseout sa nema vykonat alebo si sa dostal k BODY resp. HTML a teda onmouseout sa ma vykonat...

camo · Napísal **camo**: 17.05.2010 11:10

Moc ďakujem. Mal som v zásade problém s tým, že som nechápal, že je tu zase problém s nekompatibilitou a s tým, že treba vymenovať a testovať každý element na ktorý sa prejde. Čakal som proste opak onmouseover.
Teraz je mi už všeličo jasnejšie...
Ak to správne chápem, tak treba testovať, tie nadradené/podradené elementy, lebo prehliadač neroznáva(ja by som čakal, že hej), či element na ktorý sa prešlo, je potomok(a teda že neplatí onmouseout), alebo či je nadradený(a platí onmouseout). :-)

PS:Ďuri ak môžeš odriadkovávaj častejšie(na širokom monitore sa to blbo číta a potom aj chápe).

Merlin_sk · Napísal autor témy **Merlin_sk**: 17.05.2010 11:43

mozno ti objasni tvoje myslienky tento clanok o event bubbling a capturing...

http://www.quirksmode.org/js/events_order.html

camo · Napísal **camo**: 17.05.2010 12:16

No to som tiež potreboval vidieť, dík moc....

mouseout len na div

Podobné témy