How to stop propagating event from parent div to child div

Question

I want to stop propagate event from parent div to child div in my html. Here a simple code what I'm trying to do:

<div>
  <div id='categoryList'>
    <div class='listed-category'>
      <span>some content</span>
      <a id='close'>x</a> //"a" is used to remove the div
    </div>
  </div>
</div>
<div id='dropdown'>
</div>

In the above code if I click on <div id='categoryList'> the <div id='dropdown'> will slide-up and down by bellow code.

$(document).ready(function () {

    $('#categoryList').click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        if ($('#dropdown').is(":visible")) {
            $('#dropdown').slideUp(400);
        }
        else {
            $('#dropdown').slideDown(400);
        }
    });
})

But when I click on the child <div class='listed-category'> the above JavaScript executes and the <div id='dropdown'> is sliding up and down. How to stop this? Yet I want to be able to click on <a id='close'> to remove the child div

Answer 1

Check target for match clicked object. Try this code in beginning of click event handler.

if( event.target !== this ) {
       return;
}
//...do stuff.. 

Answer 2

A more elegant solution is to use CSS and disable the pointer events on the children.

#categoryList * {
    pointer-events: none;
}

Or in your specific case to have no events on the listed-category element:

#listed-category {
    pointer-events: none;
}