How stop checkbox ticks from closing its div when clicking outside

Question

Thanks to SO posts I'm at last able to close a div by clicking anywhere outside it. My problem is that my div to be closed contains additional divs with checkboxes. I want to be able to click the checkboxes without closing the div. Does anyone know the most efficient way of doing this? I think the fiddle demonstrates the problem http://jsfiddle.net/s72q85fm/ Any help much appreciated.

$(function() {

  $("#startbutton").click(function(e) {

    if ($('#MainContainer').is(":visible")) {
      $('#MainContainer').fadeOut(200);
    } else {
      e.preventDefault();
      $("#MainContainer").fadeIn(200, function() {
        $(this).focus();
      });
    }
  });

  $("#MainContainer").on('blur', function() {
    $(this).fadeOut(200);
  });
});

#MainContainer {
  width: 200px;
  height: 200px;
  background: green;
  color: #FFFFFF;
  display: none;
  position: absolute;
  left: -30px;
}
#CheckboxContainer {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 60px;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Universe">
  <button id='startbutton'>Open Box</button>
  <div id="MainContainer" tabindex="-1">
    <div id="CheckboxContainer">
      <label>
        <input type="checkbox" id="myRegion" />
      </label>
      <label>
        <input type="checkbox" id="myCountry" />
      </label>
    </div>"
  </div>
</div>

Don't use `.blur()` for this. Detect a click event outside the box, and use that to close it. — Barmar, Jan 06 '17 at 20:42
In your case, I'd have a look at http://jsfiddle.net/sxbducmv/ — ValLeNain, Jan 06 '17 at 20:49
@Barmar, I spent hours trawling through all these posts... obviously there were things that were much related to my question but I couldn't find anything that duplicates what I've asked, given the specific method I'm using. Would appreciate if you could be specific as to where I can find the duplicate. I must add that in my case I wasn't able to get most of the other approaches working at all. — Silverburch, Jan 06 '17 at 21:39
@ValLeNain you've given a link to something that looks exactly like the fiddle I originally attached. — Silverburch, Jan 06 '17 at 21:41
sorry, forgot to save the draft :) http://jsfiddle.net/sxbducmv/1/ should be better — ValLeNain, Jan 07 '17 at 18:02

Nadir Laskar · Accepted Answer · 2017-01-06T21:36:33.073

Inside your blur listener check for e.relatedTarget.type of event and don't blur if it is a checkbox and also get back the focus to MainContainer instead of blur if it is a checkbox (see the else block of below code)

UPDATE:

We also need to check for null value of e.relatedTarget as it will be null when click outside.

$("#MainContainer").on('blur', function(e) {
    if(!(e.relatedTarget!=null&&
          e.relatedTarget.type=='checkbox'))  $(this).fadeOut(200);
    else $(this).focus();
});

$(function() {

  $("#startbutton").click(function(e) {

    if ($('#MainContainer').is(":visible")) {
      $('#MainContainer').fadeOut(200);
    } else {
      e.preventDefault();
      $("#MainContainer").fadeIn(200, function() {
        $(this).focus();
      });
    }
  });

   $("#MainContainer").on('blur', function(e) {
    if(!(e.relatedTarget!=null&&e.relatedTarget.type=='checkbox'))
       $(this).fadeOut(200);
    else{$(this).focus();} 
  });

});

#MainContainer {
  width: 200px;
  height: 200px;
  background: green;
  color: #FFFFFF;
  display: none;
  position: absolute;
  left: -30px;
}
#CheckboxContainer {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 60px;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Universe">
  <button id='startbutton'>Open Box</button>
  <div id="MainContainer" tabindex="-1">
    <div id="CheckboxContainer">
      <label>
        <input type="checkbox" id="myRegion" />
      </label>
      <label>
        <input type="checkbox" id="myCountry" />
      </label>
    </div>"
  </div>
</div>

Check for null value when event not generated from checkbox Check my updated code. — Nadir Laskar, Jan 06 '17 at 21:07
@Nadir Laskar this works beautifully and most importantly I've learned from your explanations. I much prefer this approach to one that detects a click outside the box and continues to register every single click the User makes. — Silverburch, Jan 06 '17 at 21:57
I am glad, it helped and yes it is a much better approach over listening for every click. — Nadir Laskar, Jan 06 '17 at 22:00

How stop checkbox ticks from closing its div when clicking outside

1 Answers1