Предотвращение события click в div, который находится внутри элемента li

Question

Я долго искал ответ, но в моей проблеме ничего не помогало. У меня есть div внутри и элемент li (чтобы расположить внизу этого элемента li). Я сделал несколько функций для отображения и скрытия этого div, когда пользователь нажимает на этот элемент li, но я хочу перестать скрывать его, когда на него нажимают (не на элемент li).

Вот мои функции:

$(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");     
    }
}

Есть ли способ сделать что-то подобное? Я искал несколько часов и не нашел хороших решений. Спасибо за любую помощь.

Answer 1

Вы пробовали

e.stopPropagation()

Answer 2

event.stopPrapagation() - это то, что вы ищете.