Tengo un div oculto que muestra y oculta al hacer clic en un botón ( toogle ). Este div también oculta cualquier cosa en la que hagas clic en cualquier parte del documento. Y finalmente, también tengo un evento de stopPropagation click function en el div para que no se oculte cuando haga clic en él. Todo esto está funcionando como se esperaba.

La input dentro del div es un campo de búsqueda que muestra resultados en tiempo real mientras los usuarios escriben y, a menudo, los usuarios seleccionan el texto que están escribiendo para editarlo o eliminarlo.

Mi problema es que cuando los usuarios seleccionan el texto y deslizan el dedo fuera del campo (mientras presionan el botón del mouse), el div se ocultará automáticamente.

¿Cómo podría prevenir esto?

Espero haberme explicado lo suficientemente bien, esta puede ser una pregunta confusa.

Este es un ejemplo de trabajo. Simplemente escriba algo dentro y selecciónelo:

 $('.input').click(function(e) { e.stopPropagation(); }) $('.button').click(function(e) { $('.input').slideToggle('fast'); e.stopPropagation(); }) $(document).on("click", function() { $('.input').slideUp('fast'); });

 html {margin-left:100px;} .button { height:50px; width:50px; background-color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="button"> </div> <div id="divBuscar" class="input" style="display: none;"> <input type="text" id="txtBuscar" name="txtBus" placeholder="Buscar productos, promociones, novedades..."> <a id="btnBuscar"></a> </div>

Ty.