Hide DIV when I click away

Question

I've read many SO answers on this but none of them is quite what I need. I have a div button which when clicked shows a div called #settingswindow. I would like to be able to close it when I click away.

The code below does that but the #settingswindow div also closes when I click on it, which is an undesirable effect.

// settings button
$(document).ready(function(){
  $("#settings").click(function(event){
    event.stopPropagation();
  $("#settingswindow").toggle();
 });});
$(function(){
$(document).click(function(){
    $('#settingswindow').hide();
});
});

Thanks for your help.

score 1 · Answer 1 · answered May 05 '14 at 23:17

1

Create a function for $('#settingswindow').click(), then use event.stopPropagation() http://api.jquery.com/event.stoppropagation/ to stop event bubbling.

answered May 05 '14 at 23:17

Gang Su

1,187
10
12

I do use event.stopPropagation() which does what it should and allows me to open the DIV instead of the body doing the .hide() effect. The problem is that when I click into the div... it hides and this being a setting window means that you cannot make any settings changes. – May 05 '14 at 23:28

score 1 · Accepted Answer · answered May 05 '14 at 23:38

1

Add this line:

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

http://jsfiddle.net/DerekL/N9cbk/

answered May 05 '14 at 23:38

Derek 朕會功夫

92,235
44
185
247

Would you mind adding a bit of an explanation to your code so that I can understand why are thing happening the way they are? Thanks – May 06 '14 at 00:04
While this is the accepted answer, note that using stopPropagation() is not recommended. See here. https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element?rq=1 – Kevin Aug 03 '17 at 16:19
@Kevin Using both the example in your linked css-tricks article or `stopPropagation` is a bad idea. The best way of achieving this effect is to make the container focusable and bind to the `blur` event instead. I will update this answer when I have time. – Derek 朕會功夫 Aug 03 '17 at 17:33
@Derek朕會功夫 Not a good idea UX-wise. This means the modal will close when the user switches to another tab or window, or focuses on an input within the modal. – Kevin Aug 04 '17 at 00:38
In addition, the 'click' event fires on mouse up, while the 'focusout' event triggers the instant you press mouse down. Normally, a button only performs an action if you press the mouse button down and then let go. – Kevin Aug 04 '17 at 00:46

Aram · Answer 3 · 2014-05-05T23:36:39.153

0

What you should do is you should set the tabindex attribute of the DIV to -1 so that the focus events works for your div:

<div id="settingswindow" tabindex="-1"></div>

Set the focus, to the div, after displaying. And then use the focusin or focusout jquery events to fix your problem. like when focusout event happens, you can hide your div:

$('#settingswindow').focusout(function() {
    $('#settingswindow').hide();
});

here is a working sample: http://jsfiddle.net/XVTuL/

edited May 05 '14 at 23:36

answered May 05 '14 at 23:19

Aram

5,537
2
30
41

This Plunker demonstrates the use of event.stopProgagation(): http://plnkr.co/edit/yvm0MEL9T56PipRk8W0J?p=preview – Marc Kline May 05 '14 at 23:21
Unfortunately it did not work. Any chance you could show it in a small jsfiddle snipet. Thanks again for the effort. – May 05 '14 at 23:25

Hide DIV when I click away

3 Answers3