wake-up-neo.net

How To: div mit onclick in ein anderes div mit onclick javascript

nur eine kurze Frage. Ich habe ein Problem mit divs mit onclick Javascript ineinander. Wenn ich auf das innere div klicke, sollte es nur feuern, es ist onclick Javascript, aber das äußere div's Javascript wird auch ausgelöst. Wie kann der Benutzer auf das innere Div klicken, ohne das Javascript des äußeren Div abzufeuern?

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
42
Daniel Brink

Grundsätzlich gibt es zwei Ereignismodelle in Javascript. Ereigniserfassung und Ereignisblubbern . Wenn Sie im Ereignisblubbern auf "div" klicken, wird zuerst das Ereignis "inside div" und dann der äußere "div" -Klick ausgelöst. während der Ereigniserfassung wurde zuerst das äußere div-Ereignis ausgelöst und dann das innere div-Ereignis. Um die Weitergabe von Ereignissen zu stoppen, verwenden Sie diesen Code in Ihrer Click-Methode.

   if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
86
Adeel

Informationen zur Weitergabe von Ereignissen finden Sie hier hier

Insbesondere möchten Sie, dass ein solcher Code in Ihren Ereignishandlern angezeigt wird, damit Ereignisse nicht weitergegeben werden:

function myClickHandler(e)
{
    // Here you'll do whatever you want to happen when they click

    // now this part stops the click from propagating
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
18
Tim Goodman

Fügen Sie einfach diesen Code hinzu:

window.event.stopPropagation();
6
user3438083

return false; von der onclick-Funktion des inneren div:

<div onclick="alert('inner'); return false;" ...

Mit was Sie es zu tun haben, heißt event propagation .

5
Tatu Ulmanen

Dies ist ein Fall von Ereignisblubbern.

Sie können verwenden 

e.cancelBubble = true; //IE

und

e.stopPropagation(); //FF
3
rahul

Eine weitere Möglichkeit für Webkit-basierte Browser:

<div onclick="alert('inner'); event.stopPropagation;" ...
2
Juliano Moraes

Das war sehr hilfreich, aber es funktionierte nicht für mich.

Was ich getan habe, ist hier .

Also setze ich eine Bedingung für das äußere onclick-Ereignis:

if( !event.isPropagationStopped() ) {
    window.location.href = url;
}
0
shooby

Hier ist eine weitere Referenz, die Ihnen beim Verständnis der JavaScript-Ereignisblubber hilft. 

0
Ben

Das hat für mich in Jquery funktioniert:

$('#outer_element').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("Outer element is clicked")                       
});

Wenn das aktuelle Ziel nicht mit dem äußeren Div identisch ist, wird auf diese Weise nichts unternommen. Sie können normale Funktionen für die untergeordneten Elemente implementieren.

0
Ramtin

Sie können verwenden

    $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
      event.stopPropagation();
    });

0
AngelQuesada

sie haben zwei "div" und drei "/ div".

0
freddie