Textfeld - javascript-event des umgebenden elements deaktivieren

[JanHH]

Hallo,

ich hab eine Table-Zelle (td), diese hat ein javascript-onclick-event. in diesem TD ist nun ein Textfeld (sowohl einzeiliges Feld aus auch Textarea möglich); wenn man auf diese klickt, soll das javascript-event der TD explizit NICHT ausgeführt werden, wird es aber.

Gibts irgendeine Möglichkeit, die javascript-eventhandler der hierarchisch gesehenen "parent"-Komponenten explizit zu deaktivieren? Oder irgendeinen anderen Weg, das Problem zu lösen?

Gruß und vielem Dank.

 

[omoxen]

ja, gibt es. Geht glaub mit event.cancelBubble = true, bei jQuery gibts auch sowas, glaub event.preventBubbling() oder so. Vielleicht reicht es auch schon ein return false. Funktioniert das nicht, such halt mal nach Event-Bubbling.

 

[Tronjer]

Da gäbe es mehrere Ansätze. Man könnte z.B. den Node abfragen.

Zwei verschachtelte HTML-Elemente:

<div style="width:200px;height:200px;background:red">
    <p style="width:50px;height:50px;background:blue;top:50px;margin-left:50px;position:relative;"></p>
</div>

und ein EventListener, der nur beim äußeren Element getriggered wird:

$('div').on('click', function(event) {
    var thiz = event.target.nodeName.toLowerCase();
    if(thiz !== "p") {
        console.log('Parent-Element');  // tu was
    }
    return false;
});

Anderen Möglichkeiten wären, CSS-Klassen oder ein data-Attribut einzubauen, und danach zu fragen. jQuery bietet da mit Funktionen wie: is(), has(), not(), closest(), etliche Kombinationen. Einfach mal in die Doku schauen.

 

[JanHH]

Hab bisher rausgefunden das event.stopPropagation() der richtige Weg ist und auch folgenden Code, der laut Internet funktionieren müsste

function tstop(e) { var e2 = window.event || e; //alert('e2: '+e2); if(e2.stopPropagation) { e2.stopPropagation(); } else { e2.cancelBubble = true; } }

(wie fügt man hier code ein?)

der Haken ist nur, er tuts nicht.. naja danke für die Antworten, die Tage mal dran weiterbasteln.