I have a "hiddeable" element, it hides when the user click on it, except when the user click in an input text field, the script is very simple:
$('#main_table #sidebar .mini_hid').click(function(){
$('#main_table #sidebar').removeClass('show');
});
$('#main_table #sidebar .mini_hid input[type="text"]').click(function(e){
e.stopPropagation();
});
To hide the element I remove the "show" class, and to avoid to trigger it clicking the text field I use a stopPropagation.
This works fine on Computers and Mac, but in Android devices stopPropagation is not working, so when an user clicks on the text field the whole element hides.
I need the stopPropagation() works to avoid hidding its container.
Ok I solved this issue changing the click
event for mouseup
.
$('#main_table #sidebar .mini_hid').mouseup(function(){
$('#main_table #sidebar').removeClass('show');
});
$('#main_table #sidebar .mini_hid input[type="text"]').mouseup(function(e){
e.stopPropagation();
});
This is not really a full solution but a workaround.