onclick van onderliggende lagen voorkomen

[BikkelZ]

Ik heb een verzameling divjes, waarin ieder divje in principe het zelfde doet, namelijk een x aantal divjes bevatten, en roodomrand worden en wat andere functies aanroepen als ik er op klik. Nou makkelijk, dus gewoon onclick="functienaam(this)" en dan hoppa.

Maar de onderliggende divjes, waar die div weer in zit, die hebben diezelfde onclick en vangen de click ook allemaal op. Ik geloof dat het met een <a> te voorkomen is, maar ik heb niet het idee dat dat de manier is om het op te lossen.

[crisp]

stopPropagation() (echte browsers) of cancelBubble (IE)

[BikkelZ]

Het schoot me te binnen dat zoiets event-bubbling heet, en ik stuitte op iets wat cancelBubble heette. Dat lijkt niet te werken. stopPropagation lijkt alleen in combinatie met een event handler te werken.

De code nu:

JavaScript:

[function giveOptions(left, right, type, pid)
{
    clicked = document.getElementById(pid);
    clicked.stopPropagation();
    clicked.cancelBubble = true;
    clicked.parentNode.cancelBubble = true;
    clicked.style.borderColor = "red";
    clicked.style.borderWidth = '2px';
    clicked.style.margin = '3px';
}

-----------

Aangepast.

[ Voor 17% gewijzigd door BikkelZ op 31-08-2006 14:35 ]

[BikkelZ]

crisp schreef op donderdag 31 augustus 2006 @ 14:25:
stopPropagation() (echte browsers) of cancelBubble (IE)

Het gebruik van stopPropagation is mij niet geheel duidelijk. Er stond op mozilla pagina's trouwens dat cancelBubble deprecated was maar nog wel werkte. Lijkt me ook niet wenselijk in gebruiksvriendelijkheidsopzicht.

Het is een site die alleen in FireFox hoeft te werken, dus dan mag het eens een keer op de goede manier

[ Voor 12% gewijzigd door BikkelZ op 31-08-2006 14:32 ]

[crisp]

stopPropagation is een method van het event-object net als cancelBubble een property is van het global event-object in IE.

En wat is 'clicked' in je functie? Een global?

[ Voor 17% gewijzigd door crisp op 31-08-2006 14:33 ]

[BikkelZ]

crisp schreef op donderdag 31 augustus 2006 @ 14:32:
stopPropagation is een method van het event-object net als cancelBubble een property is van het global event-object in IE.

Dus ik moet this meegeven in de functie en dan .stopPropagation in die functie aanroepen? Of moet ik dat daarvoor al doen?

------------

Ik heb de code even aangepast, stond er niet goed zo.

------------

Dus ik moet eerst eventlisteners gaan hangen aan al die divs via javascript, en dan in de functie die de eventlistener aanroept de boel gaan afvangen via stopPropagation?

http://developer.mozilla....mple_5:_Event_Propagation

[ Voor 34% gewijzigd door BikkelZ op 31-08-2006 14:41 ]

[BikkelZ]

Okay, geef me een vinger en ik maak zelf een hand

JavaScript:

function giveOptions(evt, clicked, left, right, type)
{
    evt.stopPropagation();
    clicked.style.borderColor = "red";
    clicked.style.borderWidth = '2px';
    clicked.style.margin = '3px';
}

Aangeroepen via:

HTML:

<div style="border-color: red; border-width: 2px; margin: 3px;" onclick="giveOptions(event, this, 35, 36, 'text')" id="31" />

[ Voor 8% gewijzigd door BikkelZ op 31-08-2006 14:56 ]

[crisp]

BikkelZ schreef op donderdag 31 augustus 2006 @ 14:55:
Okay, geef me een vinger en ik maak zelf een hand

Dat was ook de bedoeling

HTML:

<div style="border-color: red; border-width: 2px; margin: 3px;" onclick="giveOptions(event, this, 35, 36, 'text')" id="31" />

een ID-attribuut mag niet met een cijfer beginnen

[BikkelZ]

Toch raar dat ze steeds van die patserige custom Events gebruiken in ieder voorbeeld.

Java-wannabees


En jajajajajaja...I know...maar het is een ID uit de database, dus het was nu even makkelijk om het een nummer te houden