How to add a close event when click outside of its content

Question

I have a chat section fixed at the bottom of my website, it has a 'toggle' function, so it means it closes and open when the user hit the 'Chat support' button, what I want to do is to add the functionality that closes the chat even if you hit outside the button but I don't know how to do that.

I leave my js code below, it's just a simple toggle function, I hope you guys can help me with this, as you can see I'm really new in jQuery.

Code:

$('#ChatToggle').click(function(){
    $('#ChatContainer').toggle('slow');
});

Thanks in advance.

Listen for click on an ancestor element and close it only if open (ie. use `hide()`). — iCollect.it Ltd, Oct 09 '14 at 18:38

score 2 · Accepted Answer · edited May 23 '17 at 11:57

One method is to bind another click event to the document itself (or a different ancestor, if you like):

$(document).on('click',function(){
    $('#ChatContainer').hide('slow');
});

When you click the toggle button, the click event will bubble up the DOM tree to the document. This will fire both the "toggle" and the "hide" methods, causing the container to open and then immediately close. To prevent that, we'll need to stop that propagation in the "toggle click" listener with stopPropagation():

$('#ChatToggle').on('click',function(e){
    e.stopPropagation();
    $('#ChatContainer').toggle('slow');
});

WORKING EXAMPLE

Edit:

As mentioned by Banana, clicking the container will also cause the container to close. If this is undesirable, bind a click event to #ChatContainer and call stopPropagation() and preventDefault(). To simplify, you can simply return false;, which does both:

$('#ChatContainer').on('click',function(){
    return false;
});

WORKING EXAMPLE

This works perfectly and I really understand what's doing in here, thank you so much for the help! — Alex, Oct 09 '14 at 18:47
your answer is good, but i dont feel right with the chat closing if you click it as well. what if you want to copy something from the chat, or accidentally click it out of habit?, if you add a handler to the chat that stops propagation from the chat window, you will get my upvote — Banana, Oct 09 '14 at 18:51

iCollect.it Ltd · Answer 2 · 2014-10-09T18:59:40.623

2

Banana's answer was close, as was showdev, but you also need to stop the click of the ChatContainer. I also simplified the "other" click handler:

http://jsfiddle.net/785xrb4s/5/

$('#ChatToggle').on('click',function(e){
    e.stopPropagation();
    $('#ChatContainer').toggle('slow');
});

$(document).click(function(){
    $('#ChatContainer').hide("slow");
});

$('#ChatContainer').click(function(e){e.stopPropagation()}).hide();

edited Oct 09 '14 at 18:59

answered Oct 09 '14 at 18:54

iCollect.it Ltd

92,391
25
181
202

yep you are right, +1 for the best solution. however in the other answer, stopping propagation on the chat window would have worked as well – Banana Oct 09 '14 at 18:56

score 0 · Answer 3 · answered Oct 09 '14 at 18:41

0

you might want to do something of the sort:

$("*:not(#ChatContainer)").click(function(){
    $(this).hide();
});

or

$("*").not("#ChatContainer").click(function(){
    $(this).hide();
});

or as suggested below, to avoid the extra handlers you could do delegation:

$(document).on("click","*:not(#ChatContainer)",function(){
    $(this).hide();
});

if you click on anything except the chat window, it will close...

answered Oct 09 '14 at 18:41

Banana

7,424
3
22
43

That has a huge overhead as it attaches a click handler to every single element on the page. Best take advantage of event bubbling at an ancestor. – iCollect.it Ltd Oct 09 '14 at 18:42
As clicking the element hides it too, there is no need to exclude the original element with `:not`. In which case "*" does not need delegation. Just use `$(document).click()` – iCollect.it Ltd Oct 09 '14 at 18:45
i thought the whole point was to close the chat if you click outside of it, and not itself. – Banana Oct 09 '14 at 18:47
Just tried your code in the other JSFiddle and it does not behave as you expect: http://jsfiddle.net/785xrb4s/1/ – iCollect.it Ltd Oct 09 '14 at 18:51

score 0 · Answer 4 · answered Oct 09 '14 at 18:53

All answers are good but missing one thing, if you click inside the chat div it will close also. TO prevent this you need to check if the target of the click event is inside the chat div http://jsfiddle.net/qct3bb67/1/

$(document).on('click', function(e){
    if ($(e.target).closest("#ChatContainer").length === 0) {
        $('#ChatContainer').hide('slow');
    }
});
$('#ChatToggle').click(function(e){
    $('#ChatContainer').toggle('slow');
    e.stopPropagation();
});

How to add a close event when click outside of its content

4 Answers4

Edit: