title: How to stop propagating event from parent div to child div
body: <p>I want to stop propagate event from parent <code>div</code> to child <code>div</code> in my html. Here a simple code what I'm trying to do:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div id='categoryList'&gt;
      &lt;div class='listed-category'&gt;
        &lt;span&gt;some content&lt;/span&gt;
        &lt;a id='close'&gt;x&lt;/a&gt; //"a" is used to remove the div
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id='dropdown'&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the above code if I click on <code>&lt;div id='categoryList'&gt;</code> the <code>&lt;div id='dropdown'&gt;</code> will slide-up and down by bellow code.</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#categoryList').click(function (event) {
          event.preventDefault();
          event.stopPropagation();
          if ($('#dropdown').is(":visible")) {
              $('#dropdown').slideUp(400);
          }
          else {
              $('#dropdown').slideDown(400);
          }
      });
  })
  </code></pre>
  
  <p>But when I click on the child <code>&lt;div class='listed-category'&gt;</code> the above JavaScript executes and the <code>&lt;div id='dropdown'&gt;</code> is sliding up and down. How to stop this? Yet I want to be able to click on <code>&lt;a id='close'&gt;</code> to remove the child <code>div</code></p>