[JS] cancelBubble

[Verwijderd]

Hallo,

ik ben bezig met een dropdown/slide menu aan het maken. En in IE werkt het nu en ik wilde het nu zo maken dat het ook in mozilla werkte.

Het eerste waar ik mee zit is de canceBubble event.
Ik los het nu zo op:
window.event.cancelBubble = true;

Dit staat in de functie die wordt aan geroepen.
Maar dit werkt alleen in IE.

Nu heb ik het een en ander gezocht maar ik kom er niet uit.

Ik vond op het forum dit stukje code van Crisp:

code:

function init() {
  if (document.addEventListener) {   // DOM level 2 Event Model
    document.addEventListener('click', clickHandler, true);
  } else if (document.attachEvent) {   // IE5+ Event Model
    document.attachEvent('onclick', clickHandler);
  } else {   // IE4 Event Model
    document.onclick = clickHandler;
  }
}

function clickHandler(e) {
  if (!e) e = window.event;    // IE event Handler
  // do stuff
  if (e.stopPropagation) e.stopPropagation();   // DOM Level 2
  else e.cancelBubble = true;    // IE
}

Maar ik zou zo niet weten wat het doet en hoe ik het moet gebruiken.
In een functie (onder een div click) wil ik stoppen met bubbelen. Voor de rest bubbelt er nog niks.
Kan iemand (misschien crisp zelf) mij uitleggen hoe ik dit zou kunnen gebruiken om het ook Mozilla compatible te maken?

[crisp]

zie http://www.quirksmode.org/js/events_order.html voor een (m.i.) heel duidelijke uitleg over de verschillende eventmodellen

[Verwijderd]

OK, bedankt.

ik zal het eens doorlezen. Denk wel dat ik er wijzer van word en er verder mee kom

offtopic:
valt me nu ineens op, dat de post reply onderaan weg is. Moest weer naar boven scrollen....

UPDATE:
Ik heb het doorgelezen en ben er wijzer van geworden. Alleen is mijn probleem niet opgelost.
Ik geef namelijk ook een parameter mee aan de functie. En zover ik uit het "artikel" opmaak, kan ik alleen de event coppelen aan een element:
element1.addEventListener('click',doSomething2,false)

Nu zal ik het nog een nader omschrijven, misschien dat er wel iemand is met een betere oplossing.
Ik heb een div met daarin 2 divs en een plaatje.

code:

+---------------------------------------------+
| +-----------------------------------------+ |
| |   2                           [plaatje]  | |
| +-----------------------------------------+ |
|                                             |
| +-----------------------------------------+ |
| |   3                                     |  |
| |                                        |  |
| |                                        |  |
| |                                        |  |
| |                                        |  |
| +-----------------------------------------+ |
|    1                                       |
+---------------------------------------------+

zoiets, dus....

- nu als je over de div gaat met het plaatje erin (2), moet ie een mouseover uitvoeren, verder niks
- als er op de div met het plaatje (2) wordt geklikt moet het plaatje gewijzigd worden en de div eronder (3) wordt invisible gemaakt.

Maar dit komt meerdere keren voor op een pagina, het is zelfs mogelijk dat in de div die invisible gemaakt kan worden (2) kan het hele ding nog een keer voorkomen. Dus in div 3 kan div 1 weer opnieuwe verkomen.

alvast bedankt

[ Voor 87% gewijzigd door Verwijderd op 18-04-2004 22:10 ]

[Verwijderd]

Ik heb nu een klein test dingetje gemaakt,
ik heb nu een div waaraan ik een event wil koppelen.

Ik heb het stukje van Crisp gekopieerd en erin geplakt. In mozilla werkt het nu!
Alleen nu in IE niet meer, ik krijg een foutmelding bij de regel van het koppelen van de event. Zowel in internetexplorer 5 en 6

[crisp]

Een stukje source van je testdingetje zou handig zijn

[bakakaizoku]

offtopic:
Wat doet dat cancelBubble precies? Ik heb nog nooit van een Bubble oid gehoord

[BtM909]

mattttt schreef op 19 april 2004 @ 15:31:

offtopic:
Wat doet dat cancelBubble precies? Ik heb nog nooit van een Bubble oid gehoord [afbeelding]

Lees en huiver

crisp schreef op 18 april 2004 @ 21:03:
zie http://www.quirksmode.org/js/events_order.html voor een (m.i.) heel duidelijke uitleg over de verschillende eventmodellen

[Verwijderd]

Voor de hele luie Mattt: cancelBubble zorgt ervoor dat een Event niet omhoog Bubbelt
En ga nu maar gauw dat artikel lezen

[ Voor 8% gewijzigd door Verwijderd op 19-04-2004 21:02 ]