How to Check if a Targeted Element is DIFFERENT from a Set of Multiple Elements

Question

I want to know how to check if an element is different from a set of multiple elements. Specially, the main functionality of this is to hide an element while not clicking on those elements. But, at the same time, it SHOULD NOT hide while clicking them.

Chat is the only element that do that. Because it has an onClick function within.

In other words, it should hide #chat while clicking only in the page or in chat. But it SHOULD NOT hide while clicking their children. Thank you!

I did a research and tried in many different ways but couldn't find a solution yet. If I click in #chat_content which is inside #chat, #chat fadeOut. Chat is the parent of those elements.

The is() method returns true if at least one of these elements matches the given arguments. So I PUT ! to make the distinction.

$(window).click(function (e){
        var targ=$(e.target);
        if(!targ.is("#chat, #chat_content, #mensajes, .online, .usuarios_online, .mensajes, #usuarios_chat, #usuarios_personal_chat")){ 
            $("#chat_content").fadeOut("slow");
            $("#mensajes").css("margin-top","3px");

        }
    })

function open_chat(){

    if($("#chat_content").is(":hidden")){

        $("#chat_content").fadeIn("slow");
        $("#mensajes").css("margin-top","0px");

    }else{

        $("#chat_content").fadeOut("slow");
        $("#mensajes").css("margin-top","3px");

    }

}

<div id='chat' onClick='open_chat()'>
        <div id='chat_content'>

        <div id='usuarios_chat' onClick='open_personal_chat()'>
        <p class='p_usuarios'><img 
  src='Zona_Contenido/Empresa/Logo_Empresa/" . $logo_empresa_chat . "' 
  class='logo_chat'/><span class='usuario_chat'></span><img 
  src='Zona_Contenido/Empresa/Image/Online.svg' class='online_chat'/> . 
  </p></div><div id='usuarios_personal_chat'></div>

        </div>
        <p id='mensajes'><img 
  src='Zona_Contenido/Empresa/Image/Online.svg' class='online'/><span 
  class='mensajes'>Chat</span><span class='usuarios_online'></span></p>
    </div>

Answer 1

I would set the click handler like this:

$(window).click(function(){
  $("#chat_content").fadeOut("slow");
  $("#mensajes").css("margin-top","3px");
});

So it would fire on clicks made anywhere in the page... Which you seem to be wanting.

Now to exclude #chat and it's descendants fom the above click handler, I would try event.stopPropagation():

$("#chat").click(function(e){
  e.stopPropagation();
});

So the click made on #chat and any descendants won't bubble up to the window.

Answer 2

I find the solution with a little retouch. The main issue was that I forgot to add other classes that are inside #usuarios_chat like .p_usuarios, .logo_chat, .usuario_chat amongst them. Indeed, I though of modularizing to find out what was causing to not working as expected xD.

So this is the final code: Cause this was causing to fadeOut wherever I click inside the #chat element. I should check this out (width...) or if does inherit to others :-? function open_chat(){

    if($("#chat_content").is(":hidden")){

        $("#chat_content").fadeIn("slow");
        $("#mensajes").css("margin-top","0px");

    }/*else {

        $("#chat_content").fadeOut("slow");
        $("#mensajes").css("margin-top","3px");

    }*/

}

   $(window).click(function (e){
        var targ=$(e.target);

        if(!targ.is("#chat, #chat_content, #mensajes, .online, .usuarios_online, .p_usuarios, .logo_chat, .usuario_chat, .mensajes, #usuarios_chat, #usuarios_personal_chat")){ 
            $("#chat_content").fadeOut("slow");
            $("#mensajes").css("margin-top","3px");
        }   

    })