Frage JQuery - Aktion für übergeordnetes Div unterbinden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

petrei86

Neues Mitglied
10 Dezember 2019
24
0
1
35
Hallo

Habe hier einen Testcode mit jQuery.
Wenn ich auf das kleine Div klicke, welches im grossen Div drinn ist, dann reagiert auch immer die Aktion für den Klick auf das grosse Div (Console Log).

Wie kann ich unterbinden das beim Klick auf das kleine Div, auch die Aktion für das grosse Div ausgeführt wird?

Code:
    <style>
        
        #DivGross {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        #DivKlein {
            width: 100px;
            height: 100px;
            background-color: red;
        }       
        
    </style>
    
    <div id="DivGross">
        <div id="DivKlein">
        </div>
    </div>
    
    <script type="text/javascript">
        
        $("#DivGross").on("click", function() {
            console.log("Klick Div gross");
        });
        
        
        $("#DivKlein").on("click", function() {
            console.log("Klick Div klein");
        });
        
    </script>

Gruss petrei86
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Wie kann ich unterbinden das beim Klick auf das kleine Div, auch die Aktion für das grosse Div ausgeführt wird?
Eine Alternative könnte sein, das Eventbubbling nicht zu unterdrücken, sondern dir zu Nutze zu machen: Nur einen Eventlistener für das äußere Div registrieren und anhand der ID des Target entscheiden, welches Div geklickt wurde:
Code:
document.querySelector("#DivGross").addEventListener("click", function(event) {
    switch (event.target.id) {
        // event.target ist das Element, das geklickt wurde
        // wir können an Hand seiner ID unterscheiden
        // welches Div geklickt wurde:
        case "DivGross":
            // das äußere, große Div wurde geklickt
            break;
        case "DivKlein":
            // das innere, kleine Div wurde geklickt
            break;
    }
});