Frage JQuery - Aktion für übergeordnetes Div unterbinden

[petrei86]

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?

    <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

 

[tk1234]

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

Indem du das Event-Bubbling für den Eventhandler stoppst, mit jQuery dürfte das genauso gehen, hier würde aber einfaches Vanilla-JS völlig ausreichen.