Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: mouseover, mouseout i propagacja zdarzeń
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
#luq
Od razu podam przykładowy kod:
  1. <div id="test">
  2. <div class="foo">123</div>
  3. <div class="foo">321</div>
  4. <div class="foo">333</div>
  5. </div>


  1. #test { background-color: #f00; width: 120px; padding: 1px; }
  2. .foo { padding: 10px; width: 100px; background-color: #fff; }


(Mootools)
[JAVASCRIPT] pobierz, plaintext
  1. window.addEvent('domready', function(){
  2. $('test').addEvent('mouseout', function(){
  3. console.log('ALERT!!');
  4.  
  5. });
  6.  
  7. $$('.foo').addEvent('mouseout', function(e){
  8. e.stopPropagation();
  9. });
  10. });
[JAVASCRIPT] pobierz, plaintext


Chodzi o to, że chce odpalić jakąś funkcję tylko i wyłącznie kiedy myszka zjedzie z całego kontenera #test. Jednak ze względu na to, że ten div ma jedynie padding: 1px to jeśli dość szybko zjadę z niego myszką to event się nie wykona. Dodatkowo event wykonuje się także jak najadę myszką na kontener. Natomiast jeśli usunę padding (divy .foo zajmują całą powierzchnię #test) to zdarzenie w ogóle nie będzie się odpalać.

Live przykład

Generalnie chodzi mi o tego scrollera, ma to działać tak, że po najechaniu na niego zaczyna działać, a po zjechaniu przestaje. Odpalcie firebuga i najedźcie na obszar ze zdjęciami pozostawiając myszkę w jednym miejscu na obrazku. Za każdym razem kiedy pod myszką następuje zmiana obrazków jest odpalany event mouseout a następnie mouseover, a chce żeby odpalało się tylko dla głównego kontenera. Jakieś pomysły?
Ilware
a jak byś oba zdażenia dał na główny div ( <div id="test"> )?
#luq
Nie bardzo rozumiem. Zatrzymywanie propagacji zdarzenie ustawia się w elementach które nie mają podlegać bąbelkowemu przechwytywaniu zdarzeń. Czyli tak jak jest musi być.
Napisanie tak:
[JAVASCRIPT] pobierz, plaintext
  1. $('test').addEvent('mouseout', function(e){
  2. console.log('ALERT!!');
  3. e.stopPropagation();
  4. });
[JAVASCRIPT] pobierz, plaintext

Jest oczywiście błędne w tym przypadku i nic mi nie daje.
zegarek84
widzę, że korzystasz z biblioteki prototype... oże nie najświeższy news ale jednak ;] :
http://www.prototypejs.org/2009/3/27/proto...s#what8217s_new

z tego wynika, że jest zaimplementowane zdarzenie mouseenter i mouseleave wink.gif
#luq
Cytat(zegarek84 @ 30.04.2011, 15:52:35 ) *
widzę, że korzystasz z biblioteki prototype...

Specjalnie dałem w moim pierwszym poście nazwę frameworka i jest to Mootools.
zegarek84
więc dokumentacja mootools - mouseeneter i leave też jest zdefiniowane w bibliotece ;]
http://mootools.net/docs/core/Element/Elem...ents:mouseenter
#luq
Extra! smile.gif
Nie dokopałem się do tego.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.