Links oben auf Elemente mit Onclick-Handlern

Question

Hey. Ich habe ein dummes, aber fieses Problem.

Wenn ich diese habe (vereinfachte) Situation:

<div onclick="doSomething(); return false;"> 
    lorem ipsum <a href="somewhere.html">dolor sit</a> amet 
</div> 

... Gibt es einen (praktisch) Weg, um den Onclick-Handler des übergeordneten div um zu verhindern, ausgelöst wird, wenn der Link angeklickt wird .

In meinem Szenario habe ich ein großes Wrapping Div, das zu einem "Link" mit einem onclick-Handler gemacht wird, aber ich möchte einige Textdaten mit Links darin, aber zumindest in Firefox überlagern Wenn ich auf die Links im Text klicke, wird der Onclick des Elternteils zuerst ausgeführt.

Answer 1

Sie umgehen dies, indem Sie das ursprüngliche Ziel des Ereignisses in Ihrem Handler testen. Etwas in der Art von:

function doSomething (e) { 
    // get event object and target element 
    var e = e || window.event; 
    var target = e.srcElement || e.target; 
    // is target a div? 
    if (target && /^div$/i.test(target.nodeName)) { 

    // do your magic in here ... 

    } 
} 

Answer 2

IMHO, das ist eine schlechte Verschachtelung von HTML/Verhalten. Entweder ist das ganze div anklickbar als 1 Element, oder der Link ist, aber nicht beides ... solange du sie nicht "nestest".

Answer 3

Mit jQuery können Sie jedem Ihrer Anker einen Click-Handler hinzufügen und event.stopPropagation() verwenden, um das Ereignis vom Bubbling bis zum DIV zu halten.

$('div#wrapperDiv > a').click(function(event) { 
     event.stopPropagation(); 
    });