Zwei differents OnClick auf zwei divs übereinander

Ich habe zwei divs, einen großen und einen kleineren über dem anderen, jedes div hat seine eigene OnClick-Methode. Das problem ist, wenn ich klickte auf die kleineren div, das große div OnClick-Methode aufgerufen wird, zu.

Wen kann ich das vermeiden?

  • Ich gehe davon aus, dass die Elemente verschachtelt sind.
  • Kannst du eine demo? Sie können jsbin.com.
InformationsquelleAutor Santiago | 2010-01-06
  1. 7

    Der beste Weg, um zu erkennen, welches element angeklickt wurde, ist die Analyse der Ziel-Ereignis ( click-Ereignis ). Vorbereitet habe ich kleines Beispiel für diesen Fall. Sie sehen es im code unten.

    Funktion amIclicked(e element) 
{ 
e = e || event; 
var Ziel = e.Ziel || e.srcElement; 
if(target.id==element.id) 
return true; 
sonst 
return false; 
} 
Funktion oneClick(event, element) 
{ 
wenn(amIclicked(event, element)) 
{ 
alert('Eine ' geklickt'); 
} 
} 
Funktion twoClick(event, element) 
{ 
wenn(amIclicked(event, element)) 
{ 
alert('Zwei geklickt'); 
} 
}

    Diese javascript-Methode kann aufgerufen werden, bevor Sie führen Sie Ihr Skript

    Beispiel

    <style> 
#ein 
{ 
width: 200px; 
height: 300px; 
background-color: red; 
} 
#zwei 
{ 
width: 50px; 
Höhe: 70px; 
background-color: yellow; 
margin-left: 10; 
margin-top: 20; 
} 

</style> 



<div id="eins" onclick="oneClick(event, this);"> 
ein 
<div id="zwei" onclick="twoClick(event, this);"> 
zwei 
</div> 
</div>

    Ich hoffe, das hilft.

    • Viel hilft, werde ich versuchen, danke!
    • Es funktioniert endlich mixing Antworten: event.cancelBubble = true; if (event.stopPropagation) - Ereignis.stopPropagation(); Fenster.event funktionieren nicht auf Firefox, weiß nicht warum
    • window.event ist ein nicht-standard-IE-Eigenschaft.
    InformationsquelleAutor Senad Meškin
  2. 7

    Dein problem ist, dass die click Veranstaltung wird sich ausbreiten bis das element Baum. Deshalb, jedes element enthält ein element, auf das geklickt wurde, wird auch das Feuer ein click Veranstaltung.

    Die einfachste Lösung ist das hinzufügen return false Ihren handler.

    Wenn Sie jQuery, können Sie rufen Sie e.stopPropagation(); sonst wirst du anrufen müssen e.stopPropagation() wenn es existiert, und setzen Sie event.cancelBubble = true.

    Weitere Informationen finden Sie unter hier.

    • Danke, das ist was ich dachte, aber Es einfach nicht funktioniert.
    • Vielen Dank für dieses, es funktioniert, aber es gibt einen kleinen Tippfehler. Sie schrieb e.StopPropagation(); aber es sollte e.stopPropagation();
    • Danke; behoben.
    InformationsquelleAutor SLaks
  3. 3

    Was Sie zu tun haben, ist event-bubbling. Werfen Sie einen Blick auf diese Artikel: http://www.quirksmode.org/js/events_order.html.

    Im Grunde stop-die Veranstaltung von der Weitergabe an das übergeordnete element, die Sie verwenden können, so etwas wie dieses:

    document.getElementById('foo').onClick = function(e) {

    //Do your stuff

    //A cross browser compatible way to stop propagation of the event:
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
    • Die erste Zeile der Funktion gekürzt werden kann, um e = e || window.event;
    • Es funktioniert in Chrome, aber Firefox sagt " - Fenster.Ereignis ist nicht definiert"
    InformationsquelleAutor Tatu Ulmanen
  4. 2

    Du läufst in einer gemeinsamen Veranstaltung der Vermehrung. Check-out quirksmode.org zu bekommen die vollen details, was genau passiert ist. Im Grunde, was Sie tun müssen, um in den kleineren div-click-handler ist diese:

    if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
    InformationsquelleAutor Shawn Steward
  5. 0

    Wenn Sie sich entscheiden, verwenden Sie eine javascript-Bibliothek wie http://www.jquery.com Sie können ganz einfach erreichen, was Sie versuchen zu tun, indem mit der Vermehrung Präventionsangebote.

    • Sie nicht brauchen, um jQuery verwenden oder etwas anderes, es ist leicht gemacht mit einfachen javascript.
    InformationsquelleAutor code_burgar
  6. 0

    Dieser arbeitete für mich in Jquery:

    $('#outer_div').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("outer div is clicked")                   

});

    Diese Weise, wenn das aktuelle Ziel ist nicht das gleiche wie das äußere div ist, wird es nichts tun. Implementieren Sie können die normalen Funktionen für die Kind-element.

    InformationsquelleAutor Ramtin
Schreibe einen Kommentar