How to designate Child Div being Clicked inside a Parent Div which also has a click action

0
votes

I have a parent div which has a click action for any of its area. Inside this parent div, i have a child div also with a click action. When i select the child div, both click events fire.

How can i have it designate when child is clicked and not to fire parent click event?

HTML

<div id="Parent">
    <div class="Child"></div>
</div>

CSS

#Parent
{
    Width: 300px;
    height: 300px;
    background: #000;
}

.Child
{
    Width: 100px;
    height: 100px;
    background: blue;
}

jQuery

$("#Parent").click(function () {
    window.open('http://www.Google.com', '_blank');
});

$(".Child").click(function () {
    window.open('http://www.Bing.com', '_blank');
});
1
jqueryhtml

1 Answers

5
votes

That's because the event "bubbles up" through all the ancester elements of the child. To prevent this, ust event.stopPropagation(): 

$(".Child").click(function (event) {
    event.stopPropagation()
    window.open('http://www.Bing.com', '_blank');
});