[JS] Event binnen object niet toepassen op button

[Blue-eagle]

Binnen een kader (divje) vang ik het onmousedown event af. In hetzelfde kader staat ook een knop, welke bij onclick een functie uitvoert. Bij een onclick wordt op de parent DIV-tag ook de onmousedown event afgevuurd. Hoe zorg ik ervoor dat dit niet gebeurt?

Met andere woorden: bij een onclick op de button, wil ik niet de onmousedown van het parent element afvuren.

Met zoektermen als "event bubbling" en dergelijke kwam ik ook al niet verder, dat gaat om de volgorde van de events zo te zien (wie vuurt eerst: parent of child, ofzoiets).

Wie-o-wie kan mijn deadline redden

[crisp]

stopPropagation() (en voor IE event.cancelBubble = true;)

[Blue-eagle]

Thanks, dat is de oplossing, alleen nu nog de implementatie ervan. Ik gebruik jQuery om events te binden aan objecten. Bijvoorbeeld:

JavaScript:

$("#fys_btn_undo").bind("click", function(e) {
    StopEventBubbling(e);
});

...

function StopEventBubbling(e) {
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Maar het werkt niet. Ik pas de StopEventBubbling() functie toe op de onclick van de button binnen de div en ook op de div zijn onmousedown event. Middels logging is mij duidelijk dat bij onclick op de button, nog steeds de onmousedown van zijn parent getriggered wordt.

Events.. wat een uitdaging

[Borizz]

Weet je ook welk event (event op de div of event op de button) eerst wordt getriggerd? Misschien vind er event capturing plaats i.p.v. event bubbling (wat jij verwacht). Zie ook Capturing and Bubbling Events en Document Object Model Events.

Ik weet niet hoe jQuery de events registeert...

[ Voor 4% gewijzigd door Borizz op 02-04-2008 19:18 ]

[user109731]

Blue-eagle schreef op woensdag 02 april 2008 @ 16:45:
Binnen een kader (divje) vang ik het onmousedown event af. In hetzelfde kader staat ook een knop, welke bij onclick een functie uitvoert.

Dan moet je denk ik het onmousedown event van je button afvangen en cancellen. Nu cancel je het click event, maar het onmousedown event staat daar los van

[Borizz]

JanDM schreef op woensdag 02 april 2008 @ 19:22:
[...]

Dan moet je denk ik het onmousedown event van je button afvangen en cancellen. Nu cancel je het click event, maar het onmousedown event staat daar los van

Daar zit wel wat in het mousedown event van de div wordt natuurlijk eerder getriggerd dan het clickevent van de button.

[Amorphis]

Events in JQuery staan hier http://docs.jquery.com/Events_(Guide) netjes omschreven. Zo ook voor propagation en bubbling.

[Blue-eagle]

De oplossing was relatief simpel. Op de button binnen de DIV moet ik ook de onmousedown (en in mijn geval onmouseup) events afvangen, en in deze events jQuery's stopPropagation() functie uitvoeren.

Dus:

JavaScript:

    // handle mouseodown on the button so it doesn't trigger the onmousedown event from
    // the parent div
    $("#fys_btn_undo").bind("mousedown", function(e) {
        e.stopPropagation();
    });

    // handle mouseup on the button so it doesn't trigger the onmousedown event from
    // the parent div
    $("#fys_btn_undo").bind("mouseup", function(e) {
        e.stopPropagation();
    });

    // finally handle the onclick
    $("#fys_btn_undo").bind("click", function(e) {
        // do whatever you like
    });

Thanks all

[ Voor 22% gewijzigd door Blue-eagle op 03-04-2008 09:42 ]

[Verwijderd]

Blue-eagle schreef op donderdag 03 april 2008 @ 09:41:
De oplossing was relatief simpel. Op de button binnen de DIV moet ik ook de onmousedown (en in mijn geval onmouseup) events afvangen...

Volgens mij is onmousedown alleen voldoende. Misschien zal je return false; in die functie erbij moeten doen.met stopPropagation/cancelBubble worden opvolgende events niet gegenereerd, dus volgens mij zal hij nooit bij het onclick-event aankomen.
Maar zal alleen nuttig zijn om je code te kunnen verdunnen

[Borizz]

Verwijderd schreef op donderdag 03 april 2008 @ 10:18:
[...]

Volgens mij is onmousedown alleen voldoende. Misschien zal je return false; in die functie erbij moeten doen.met stopPropagation/cancelBubble worden opvolgende events niet gegenereerd, dus volgens mij zal hij nooit bij het onclick-event aankomen.
Maar zal alleen nuttig zijn om je code te kunnen verdunnen

Dat is niet waar, alleen het betreffende event wordt dan gecancelled! Dus enkel mousedown (en mouseup) in dit geval maar niet het click event.