Howto: div mit onclick innerhalb eines anderen div mit onclick Javascript

nur eine kurze Frage. Ich habe ein Problem mit divs mit onclick Javascript miteinander. Wenn ich auf das innere div klicke, sollte es nur onclick javascript auslösen, aber auch das javascript des äußeren divs wird ausgelöst. Wie kann der Benutzer auf das innere div klicken, ohne das Javascript des äußeren div zu feuern?Howto: div mit onclick innerhalb eines anderen div mit onclick Javascript

<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>

Quelle

2010-03-05 Daniel Brink

Duplizieren http://stackoverflow.com/questions/2015041/two-differents-onclick-on-two-divs-one-over-the-other – vpram86

Doppelte Frage, aber bessere Antworten. –

Grundsätzlich gibt es zwei Ereignismodelle in Javascript verwenden. Ereigniserfassung und Event sprudelt. Wenn Sie im Ereignis-Bubbling auf div klicken, wird zuerst das div-Click-Ereignis ausgelöst und dann der äußere Div-Klick ausgelöst. Während der Ereigniserfassung wurde zuerst das Ereignis der äußeren Div abgefeuert und dann das Ereignis der inneren Div abgefeuert. Verwenden Sie diesen Code in Ihrer Klickmethode, um die Weitergabe von Ereignissen zu stoppen.

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

Quelle

2010-03-05 07:29:13 Adeel

danke, eine einfache klare Antwort und funktioniert perfekt –

Danke. Ausgezeichnete Antwort; genau das was ich gesucht habe. –

return false; aus der Onclick-Funktion des inneren div:

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

Was man es zu tun mit event propagation genannt wird.

Quelle

2010-03-05 07:17:26

Die vorgeschlagene Methode funktioniert nicht. (Zumindest nicht in einem der Browser habe ich es einfach überprüft-- Firefox 3.6, IE8.) Beachten Sie, dass Ihr Link eigentlich eine andere Methode verwendet, die ich in meiner Antwort angegeben habe. –

Schauen Sie sich die Informationen über Ereignispropagierung here

insbesondere Sie einen Code wie dies in Ihren Event-Handler Ereignisse stoppen Ausbreitung wollen 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(); 
}

Quelle

2010-03-05 07:18:09

Danke! das funktionierte für mich – CraZyDroiD

Dies ist ein Fall von Ereignisse sprudelnden .

können Sie

e.cancelBubble = true; //IE

und

e.stopPropagation(); //FF

Quelle

2010-03-05 07:21:39 rahul

dauerte mich eine Weile zu verstehen, aber habe es jetzt, thx –

Here ist einige weitere Referenz, die Sie in Verständnis zu helfen, JavaScript-Event sprudeln.

Quelle

2010-03-05 07:33:45 Ben

Sie haben zwei 'div' und drei '/ div'.

Quelle

2010-07-24 16:27:20 freddie

Eine weitere Möglichkeit für WebKit-basierten Browsern:

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

Quelle

2012-02-23 00:08:22 user1227168

funktioniert das aber so: onclick = "alert ('inner'); event.stopPropagation();" –

Das funktionierte für mich und ich testete es auf Opera (46), Chrome (59.0.3071.115), FireFox Entwickler (55.0b9 (32-Bit)), Internet Explorer 11 –

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

Was ich tat ist beschrieben here.

Also habe ich eine Bedingung an die äußere onclick Ereignis:

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

Quelle

2012-08-03 07:42:52 shooby

einfach diesen Code hinzu:

window.event.stopPropagation();

Quelle

2014-04-17 15:47:10 user3438083

Das funktionierte nicht für mich. Die beste Antwort ist genauer. –

Sie

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

können

Quelle

2015-04-22 12:04:44

Howto: div mit onclick innerhalb eines anderen div mit onclick Javascript

Antwort

Verwandte Themen