Don't trigger main container click if clicking in specific child element

Question

I have a click listener attached to my #main container

main.addEventListener("click", function() {
    console.log("clicked main");
});

Within my main container I have an #element also with a click listener

element.addEventListener("click", function() {
    console.log("clicked element but dont trigger main click");
});

How do I avoid triggering the #main click when clicking within #element ?

Fiddle: http://jsfiddle.net/gufo7mmc/1/

Answer 1

Use event.stopPropagation()

element.addEventListener("click", function() {
    console.log("clicked element but dont trigger main click");
    event.stopPropagation();
});

var main = document.getElementById("main");
var element = document.getElementById("element");
var textElement = document.getElementById("text");

main.addEventListener("click", function() {
    console.log("clicked main");
});

main.addEventListener("mouseenter", function() {
    textElement.style.visibility = "visible";
    console.log("trigger on everything except #element");
});

main.addEventListener("mouseleave", function() {
    textElement.style.visibility = "hidden";
});

element.addEventListener("click", function() {
    console.log("clicked element but dont trigger main click");
    event.stopPropagation();
});

#main {
    position: absolute;
    width: 300px;
    height: 600px;
    
    background-color: red;
}

#element {
    position: absolute;
    width: 100%;
    height: 100px;
    
    background-color: green;
}

#text {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 200px;
    
    background-color: blue;
    visibility: hidden;
}

<div id="main">
    <div id="element"></div>
    <div id="text">HELLO</div>
</div>