Zwei differents OnClick auf zwei divs, eine über der anderen

Question

Ich habe zwei divs, eine große und eine kleinere über die andere, jedes div hat seine eigene OnClick-Methode. Das Problem, das ich habe, ist, wenn ich das kleinere div klickte, die OnClick Methode des großen Divs wird auch genannt.

Wer kann ich das vermeiden?

Answer 1

Der beste Weg, zu erkennen, welches Element geklickt wurde, ist Ziel der Veranstaltung zu analysieren (Ereignis klicken). Ich habe ein kleines Beispiel für diesen Fall vorbereitet. Sie können es im Code unten sehen.

 
function amIclicked(e, element) 
{ 
    e = e || event; 
    var target = e.target || e.srcElement; 
    if(target.id==element.id) 
     return true; 
    else 
     return false; 
} 
function oneClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('One is clicked'); 
    } 
} 
function twoClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('Two is clicked'); 
    } 
} 

Diese Javascript-Methode können, bevor Sie Ihr Skript

Beispiel

 
<style> 
#one 
{ 
    width: 200px; 
    height: 300px; 
    background-color: red; 
} 
#two 
{ 
    width: 50px; 
    height: 70px; 
    background-color: yellow; 
    margin-left: 10; 
    margin-top: 20; 
} 

</style> 



<div id="one" onclick="oneClick(event, this);"> 
    one 
    <div id="two" onclick="twoClick(event, this);"> 
     two 
    </div> 
</div> 

Ich hoffe, das hilft ausführen aufgerufen werden.

Answer 2

Ihr Problem ist, dass das click-Ereignis die Elementbaumstruktur weitergibt. Daher wird jedes Element, das ein Element enthält, auf das geklickt wurde, auch ein click-Ereignis auslösen.

Die einfachste Lösung ist return false Ihr Handler hinzuzufügen.

Wenn Sie jQuery verwenden, Sie e.stopPropagation(); anders nennen können, müssen Sie e.stopPropagation() nennen, wenn es vorhanden ist, und legen Sie event.cancelBubble = true.

Weitere Informationen finden Sie unter here.

Answer 3

Wenn Sie sich für die Verwendung einer JavaScript-Bibliothek wie www.jquery.com entscheiden, können Sie mithilfe der Optionen für die Vermeidungsvermeidung leicht erreichen, was Sie zu tun versuchen.

Answer 4

Mit was Sie zu tun haben ist Ereignis sprudeln. Werfen Sie einen Blick auf diesen Artikel: http://www.quirksmode.org/js/events_order.html.

Grundsätzlich um das Ereignis zu verhindern, auf das übergeordnete Element passiert, können Sie so etwas wie folgt verwenden:

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(); 
} 

Answer 5

Sie sind in eine gemeinsame Fall von Ereignispropagierung läuft. Check out quirksmode.org, um die vollständigen Details zu erhalten, was genau passiert. Im Grunde, was müssen Sie in den kleineren divs Click-Handler tun, ist dies:

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