Stop bubbling on Click outside Div

by Faisal Khan Janjua

HTML

<div class="outerFilter">
  <div class="outerFilterBox"><label class="outerFilterText">Select <span>Groups</span></label></div>
  <div class="outerFilterContainer">
    <div class="defaultCheckBox"><input type="checkbox" id="otck0" value="Edinburgh"><label for="otck0">Edinburgh</label></div>
    <div class="defaultCheckBox"><input type="checkbox" id="otck1" value="London"><label for="otck1">London</label></div>
    <div class="defaultCheckBox"><input type="checkbox" id="otck2" value="New York"><label for="otck2">New York</label></div>
    <div class="defaultCheckBox"><input type="checkbox" id="otck3" value="San Francisco"><label for="otck3">San Francisco</label></div>
    <div class="defaultCheckBox"><input type="checkbox" id="otck4" value="Sidney"><label for="otck4">Sidney</label></div>
    <div class="defaultCheckBox"><input type="checkbox" id="otck5" value="Singapore"><label for="otck5">Singapore</label></div>
    <div class="defaultCheckBox"><input type="checkbox" id="otck6" value="Tokyo"><label for="otck6">Tokyo</label></div>
  </div>
</div>

SCSS

.outerFilter {
  max-width: 230px;
	position: relative;
	& .outerFilterBox {
		z-index: 3;
		float: left;
		width: 100%;
		cursor: pointer;
		background: #FFF;
		min-width: 230px;
		padding: 12px 20px;
		border-radius: 5px;
		position: relative;
		border: 1px solid #333;
		&:after {
			top: 0;
      right:0;
			content: '';
			width: 40px;
			height: 100%;
			position: absolute;
			background: #eee no-repeat center center;
		}
		& label {
			cursor: pointer;
		}
	}
	& .outerFilterContainer {
		top: 40px;
		z-index: 2;
		width: 100%;
		display: none;
		padding: 18px;
		background: #FFF;
		border-radius: 5px;
		position: absolute;
		border: 1px solid #ccc;
	}
}

JavaScript

// OuterFilter Check
jQuery(document).on('click', '.outerFilterBox', function(e) {
  e.stopPropagation();
  jQuery('.outerFilterContainer').stop().toggle();
});

jQuery(document).on('click', '.outerFilterContainer * , .outerFilterBox', function(e) {
  e.stopPropagation();
});
jQuery(document).on('click', 'html,body', function() {
  var outerFilter = jQuery(".outerFilter .outerFilterContainer");
  outerFilter.hide();
});// OuterFilter Check End