javascript - jQuery overlapping div wont nullify the hidden onclick of div -

jquery('#warning').click(function() {    console.log('clicked @ warning');  });    jquery('#content').click(function() {    console.log('clicked @ content');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="warning">    <div id="content">this content</div>    dsfdfsdsfdsfdsfdsfdsfdsf  </div>

fiddle: https://jsfiddle.net/73jykhj0/

unfortunatly clicking @ content triggers clicking @ warning too. how eliminate clicking @ warning?

prevent event bubbling using event.stoppropagation()

jquery('#warning').click(function() {    console.log('clicked @ warning');  });    jquery('#content').click(function(event) {    event.stoppropagation()    console.log('clicked @ content');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="warning">    <div id="content">this content</div>    dsfdfsdsfdsfdsfdsfdsfdsf  </div>

---

or, can check target of event using event.target needful.

jquery('#warning').click(function(event) {    if ($(event.target).is('#content')) {      return;    }    console.log('clicked @ warning');  });    jquery('#content').click(function() {    console.log('clicked @ content');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="warning">    <div id="content">this content</div>    dsfdfsdsfdsfdsfdsfdsfdsf  </div>