Preventing click event in div that is inside of li element

Question

I've been searching for a while for answer but nothing really helped me in my problem. I have div inside and li element (to position in at the bottom of that li element). I've made some functions to show and hide that div when user clicks on that li element, but I want to stop hiding it when it is clicked (not a li element).

Here are my functions:

$(document).ready(function() {
    $("#panel-user-item").click(function( e ){
        e.preventDefault();
        toggleUserPanel();
    });

    /*$(document).mouseup(function(e)
    {
        var subject = $("#panel-user-panel"); 

        if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
        {
            subject.hide(300);
            subject.addClass("hide");
        }
    });*/

});

function toggleUserPanel()
{
    if(!$("#panel-user-panel").hasClass("hide"))
    {
        $("#panel-user-panel").hide(300);
        $("#panel-user-panel").addClass("hide");
    }
    else
    {
        $("#panel-user-panel").show(300);
        $("#panel-user-panel").removeClass("hide");     
    }
}

Is there a way to do something like that? I'v been searching for few hours already and didn't find any good solutions. Thanks for any help.

Answer 1

Did you try

e.stopPropagation()

Answer 2

event.stopPrapagation() is what you're looking for.