Estoy tratando de que al hacer click fuera un modal se ejecute una función, el problema es que como el elemento donde hago click aloja mas elementos, al hacer click en cualquier elemento interno también se ejecuta la funcion, y solo quiero que se ejecute haciendo click fuera del modal.
$('.input-group').on('click', '.modal', function(){
alert("hola")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modalCart1"
>Fotografia</button>
<div class="input-group">
<div class="modal fade" id="modalCart1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header bg-primary">
<h4 class="modal-title" id="myModalLabel">Tomar fotografía</h4>
<button type="button" class="close" aria-label="Close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="box-body">
<video id="video" class="col-md-12 col-xs-12"></video>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Guardar</button>
</div>
</div>
</div>
</div>
</div>