I have a div hided that shows and hide cliking on a buttom (toogle). This div also hides whatever you click anywhere in the document.
And finally I also have an stopPropagation click function event on the div so it won't hide when you click on it. All these is working as expected
The input inside the div is a search field that shows results on real time while users are writting and often the users select whatever text they are writting to edit or delete it.
My problem is that when the users are selecting the text and swipe out of the field (while pressing the mouse buttom) the div will automatically hide.
How could I prevent this?
I hope I have explained myself well enough, this may be quiete a confused question.
This is a working example. Just writte anything inside and select it:
$('.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.
I'm ashamed I didn't thought about mousedown property.
it works just changing the script like this:
$('.input').mousedown(function(e) {
e.stopPropagation();
})
$('.button').mousedown(function(e) {
$('.input').slideToggle('fast');
e.stopPropagation();
})
$(document).on("mousedown", function() {
$('.input').slideUp('fast');
});