Autor Zpráva
Venca Černík
Profil
Ahoj, chtěl bych se zeptat, jestli existuje něco (nebo nějaká fce), co by fungovalo jako opak onClick. Prostě aby když kliknu na cokoliv jiného než na daný prvek, tak aby se spustila nějaká funkce.
Joker
Profil
To není opak onclick, ale onclick na jiný prvek ;-)

Něco takového se přímo na tom prvku udělat nedá, událost zachytí jen prvek na kterém vznikla a potom všechny nadřízené prvky. V tom taky spočívá řešení:
Protože kliknutí na prvek by vyvolá událost onclick i na nadřízených prvcích, událost document.onclick by měla nastat při kliknutí na libovolný prvek dokumentu. Je tedy potřeba napsat událost document.onclick, která to rozliší.
Venca Černík
Profil
Joker
Uvedu příklad: Mám obrázek a pokud na něj kliknu, tak se spustí fce menu:
function menu() {
var a = document.getElementById('nav');
if(a.style.display == "inline") a.style.display="none";
else a.style.display="inline";
}
Objeví se menu (DIV "nav") a pokud je zobrazeno, tak se zneviditelní. (tohle mám)

A teď potřebuju nějak udělat, aby když je menu zobrazeno, tak aby se dalo zneviditenlit jak kliknutím na obrázek, tak i kliknutím nějak mimo menu. Zkoušel jsem <body onClick="menu2()"> a fci menu2:
function menu2() {
var a = document.getElementById('nav');
if(a.style.display == "inline") a.style.display="none";
}

Bohužel to mělo za následek to, že když fce menu() chtěla zobrazit menu, tak jej fce menu2() okamžitě zneviditelnila. Takže se nic nezobrazilo ani když jsem klikl na obrázek.

Takže by bylo ideální, kdyby se tahle fce menu2() dala nahodit na všechno kromě toho obrázku.
Joker
Profil
Bohužel to mělo za následek to, že když fce menu() chtěla zobrazit menu, tak jej fce menu2() okamžitě zneviditelnila.
To má za následek právě to šíření události objektovým modelem, říká se tomu "probublávání" události.

Událost totiž nejdřív vznikne v objektovém modelu úplně "nahoře", potom "padá" stromem objektů směrem k objektu, na kterém byla vyvolána, tam se "otočí" a pak "probublává" zpátky nahoru. Každý objekt může definovat obsluhu události, zvlášť pro první fázi "zachytávání" a zvlášť pro druhou "probublávání" (logicky, kdyby byla obsluha obojího stejná, prováděla by se dvakrát)

Tady je tedy potřeba, aby se menu2() dělala při probublávání (což je snad výchozí chování), tím pádem událost nejdřív nepovšimnuta propadne k menu(), která jí musí zachytit, zpracovat a potom zlikvidovat dřív, než probublá zpátky nahoru :-)

Zrušení události se udělá pro Internet Explorer:
window.event.cancelBubble = true;
a pro W3C model:
event.stopPropagation();
Venca Černík
Profil
Joker
díky moc! Ke štěstí mi stačily jen ty poslední zápisy na to zrušení události. Nějak jsem je použil a ani nevím pořádně jak, ale funguje to.
Venca Černík
Profil
Joker
sakra.... nefunguje mi to ve Firefoxu. Dal jsem tam

if (event.stopPropagation) event.stopPropagation(); // DOM2
else event.cancelBubble = true; // IE


IE funguje, ale FF vůbec nereaguje - takže to nějak probublává nebo co... :(
Venca Černík
Profil
No vypadá to, že event musím nějak nadefinovat... neví někdo jak?
YoSarin
Profil
Nejsem si jistý, ale imho stačí do volání funkce která se provede a zastaví to "probublávání" (v tomhle případě asi menu2) přidat:
menu2(event);
Joker
Profil
Venca Černík
Ten objekt event by měl být parametr metody, která tu událost zpracovává, nebo (v IE) přes window.event:

prvek.onclick = nejakaFunkce

nejakaFunkce(e){
if(!e) e = window.event;

// něco dělej

if (e.stopPropagation) e.stopPropagation(); // DOM2
else e.cancelBubble = true; // IE
}
Joker
Profil
Jo, poznámka: to onclick by se samozřejmě mělo dělat až potom, co se definuje ta funkce, já to tam napsal jen proto, aby bylo jasné, že ta nejakaFunkce je ta obsluha události
Venca Černík
Profil
Joker
achjo... mě ten JavaScript fakt asi nepude...

Firefox mi hlásí: "e has no properties". Je to prej na řádku
if (e.stopPropagation) e.stopPropagation(); // DOM2
Venca Černík
Profil
Tak jsem si upravil jeden script z článku http://interval.cz/clanky/programujeme-dhtml-aplikace-interakce-s-uziv atelem/

teď zas nefunguje něco jiného... za chvilku sem napíšu co nefunguje..
Venca Černík
Profil
No, tak tady mám aktuální verzi: http://vencacernik.ic.cz/internet/
a potřebuju tam aby když kliknu na DIV "nav", tak aby tento DIV nezmizel. Zbytek funguje tak jak bych chtěl.
Venca Černík
Profil
Koukněte se na to... pls...
peta
Profil
var menu = 0;
var skryj = 0;

document.onclick = funkce;

function funkce(e)
{
... detekt udalosti event / e (google.com crossbrowser mouse click)
if (menu == 1)
{...}
}

pokud je menu rozbalene, tak nastavis menu=1
pokud kliknes na dokument a je menu rozbalene, tak se menu zbali, treba

<menu onmouseout="skryj=1" onmouseover="skryj=0">
<li>
<li>
</menu>

if (menu == 1 && skryj==1)
{...}
pokud kliknes na dokument a je menu rozbalene a kurzor neni v menu, tak se menu zbali, treba
peta
Profil
bohuzel, predpokladam jiste problemy u nestandartnich prvku jako treba SELECT uvnitr menu v IE. Jestli na nej najede mys, muze se stat, ze se menu zbali po kliku

jinak, co ti brani pouzit css.interval.cz menucka, co se schovavaji bez klikani?

k tomu IE :)
http://moodle.cz/file.php/1/ilovefirefox.gif
Toto téma je uzamčeno. Odpověď nelze zaslat.