Wie Click-Ereignis von äußeren div zu verhindern, wenn inner div geklickt wird

Question

Ich habe 2 divs mit einem js click-Ereignis. Ein Div befindet sich in dem anderen.

Aber ich möchte nicht das Click-Ereignis der äußeren Div ausgelöst werden, wenn ich den inneren klicke. Wie kann ich das verhindern?

Answer 1

Verwenden Sie event.stopPropagation();

Gefällt Ihnen dieses

document.getElementById("#seconddiv").addEventListener("click", function($event){ 
    $event.stopPropagation(); 
}); 

Answer 2

Verwendung event.stopPropagation:

document.getElementById('inner').addEventListener('click', function (event){ 
    event.stopPropagation(); 
    console.log ('Inner div clicked!'); 
}); 

https://jsfiddle.net/4L87qLte/

Answer 3

standardmäßig Veranstaltung beginnt auf der untersten Ebene des DOM Umgang mit dem Sie haben einen Handler definiert Behandeln Sie das Zielereignis. Angenommen, Sie Ereignis-Listener höher in der Elternkette definiert haben das gleiche Ereignis zu behandeln, werden Sie zu stop the propagation of the event benötigen, wenn Sie über die Schicht behandelt nicht für die Veranstaltung werden wollen Sie beabsichtigen, es in gehandhabt werden:

e.stopPropagation(); 

sehen Sie, was passiert, wenn Sie diese Zeile im folgenden Beispiel entfernen:

document.querySelector('.inner').addEventListener('click', function(e) { 
 
    alert('inner div clicked!'); 
 
    e.stopPropagation(); 
 
}); 
 

 
document.querySelector('.outer').addEventListener('click', function() { 
 
    alert('outer div clicked!'); 
 
});

.outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: blue; 
 
} 
 

 
.inner { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<div class='outer'> 
 
    Outer 
 
    <div class='inner'> 
 
    Inner 
 
    </div> 
 
</div>