Как сделать скрытие элемента по клику вне его области?

Question

[KOPC1886]

Вот верстка

<div class="container">
            <div class="col-md-12 nopadding">
                <div class="fuel-price-title">Cписок <a class="view-regions"> <span class="dashed">Первый</span> <span class="caret"></span></a> 
                </div>  
    
                <div id ="reg-block" class="regions-block" style="display:none;">
                    <div class="regions-list">
                        <ul>
                            <li> <a href="#">1</a> </li>
                            <li class="active"> <a href="#">2</a> </li>
                            <li> <a href="#">3</a> </li>
						</ul>
                    </div>
				</div> 
            </div>
		</div>

Вот js
открытие списке есть, а как сделать чтобы список закрывался только по клику вне его области?

$('.view-regions').on('click', function(e){
        $('#reg-block').show();
       
    });

Answer 1

[Дмитрий]

$('body').on('click', function (e) {
        if($(e.target).closest('.view-regions').prop('id') == undefined && $(e.target).closest('#reg-block').prop('id') == undefined){
             $('#reg-block').hide();
        }
});

Answer 2

[Дима Паутов]

Ну элементарно же!!!!!

Answer 3

[Денис Инешин]

$('.view-regions').on('click', function(e){
    $('#reg-block').show();  
});

$('#reg-block').on('click', function (e) {
    e.stopPropagation(); // предотвращаем закрытие по клику в элемент
});

$(document).on('click', function () {
    $('#reg-block').hide(); // закрываем по клику вне
});