Toon posts:

[JS] Onmouseover event wordt 'afgepakt' door child element?

Pagina: 1
Acties:

Verwijderd

Topicstarter
Heb een kalendertje gemaakt voor een project waar ik mee bezig ben. Nou wil ik het makkelijker maken om snel naar een andere maand/jaar te springen. Ik heb een klein formuliertje gemaakt onder de maand zodat de bezoeker een maand en jaartal kan kiezen om daarheen te springen in de kalender.

Dat formuliertje is niet echt nodig als de pagina normaal wordt weergegeven, alleen wanneer de bezoeker een maand uit wil kiezen. Ik heb dus in JavaScript gezorgd dat het formulier automatisch weg is, en als de bezoeker op de naam van de maand klikt ie weer tevoorschijn komt. (en als ie nog een keer klikt weer verdwijnt) (zie kalender1)

Ik denk dat deze 'feature' niet echt duidelijk is, aangezien het formuliertje normaal gesproken niet zichtbaar is. Daarnaast zullen niet veel mensen boven de naam van de maand blijven hangen met de muis of erop klikken. Ik vind het nog niet vanzelfsprekend genoeg.
Daarom dacht ik; als de bezoeker met de muis over de naam van de maand gaat, dat dán het formuliertje zichtbaar moet zijn en als de bezoeker de muis van de kalender afhaalt, dat ie dan weer verdwijnt. (zie kalender2)

Alles leuk en aardig, maar de onmouseout event werkt niet lekker. Het lijkt net alsof de onmouseout event al wordt getriggerd wanneer ik de muis alleen al van de naam van de maand afhaal. Niet echt de bedoeling.

Als je een overkoepelende <div> een onmouseout event geeft hoort ie toch over het gehele vlak dat die <div> is niet getriggerd te worden? Of als je met de muis op een childnode van die <div> gaat dus wel?

Hoe zou ik dit het beste op kunnen lossen?

PS Als ik het formuliertje laat weergeven wanneer ik met de muis op de kalender ga (in combinatie met dezelfde onmouseout) dan ga ie een beetje flippen...

Alvast bedankt!

Verwijderd

Topicstarter
Anyone?

  • Not Pingu
  • Registratie: November 2001
  • Laatst online: 01-04 20:36

Not Pingu

Dumbass ex machina

Dat heet nou event bubbling: als er op een element binnen die DIV een onmouseout event plaatsvindt, dan gaat dat omhoog naar het parent element: de onmouseout event vindt reeel gezien nl. ook in de DIV plaats.

Wat je kunt doen is de event afvangen en kijken wat de nodename van het element is dat oorspronkelijk de onmouseout event afvuurde. Is het een DIV, dan door laten gaan. Is het iets anders, dan het event cancellen.

Certified smart block developer op de agile darkchain stack. PM voor info.


Verwijderd

je kan ook gewoon de bubble cancellen

Verwijderd

Duidelijk event bubbling, cancel de eigenschap met bijv.

PHP:
1
2
3
4
5
6
7
8
9
10
function cancelEventBubbling(e){
    if (!e){e=event}
    if(document.all){
        event.cancelBubble=true;
    }else if(e){
        e.preventDefault();
        e.stopPropagation();
    };
    return false;
};