Tengo un menú desplegable dentro de un DIV.Cómo desenfocar el elemento div?
Quiero que el menú desplegable se oculte cuando el usuario haga clic en cualquier otro lugar.
$('div').blur(function() { $(this).hide(); }
no funciona.
Sé .blur funciona solo con <a> pero en este caso, ¿cuál es la solución más simple?
Creo que el problema es que divs no disparan el evento onfocusout. Tendrá que capturar eventos de clic en el cuerpo y luego calcular si el objetivo era entonces menú div. Si no fue así, el usuario hizo clic en otro lugar y el div debe estar oculto.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
No creo que esto responda la pregunta. Según entiendo, aamir quiere ocultar el div cuando hace clic dentro, a menos que haga clic en el elemento de selección. – ScottE
Esto está mal. ¿Qué sucede cuando el usuario hace clic en otro div que no es parte del menú? – rahul
Un div puede aceptar foco y emitir onfocus y onblur si especifica un tabindex para él. Intente esto: '
.click funcionará perfectamente dentro de la etiqueta div. Solo asegúrate de no estar por encima del elemento seleccionado.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
dar el div un id, por ejemplo "MenuContainer". luego puedes verificar por target.id en lugar de target.tagName para asegurarte de que sea ese div específico.
Trate de usar el atributo tabindex en su div, consulte:
Comprobar this puesto durante más información y demostración.
Esto no parece funcionar en iOS Safari. – Rell
Para que esto funcione el div primero debe enfocarse. Por lo tanto, asegúrese de que esté enfocado antes de intentar hacer clic div exterior para ver el efecto – Bren
OMG ... GENIUS !! muchas gracias ... aquí estaba tratando de encontrar una forma de crear un controlador de eventos personalizado ... :) – carinlynchin
No es la manera más limpia, pero en lugar de capturar cada clic de evento en la página, puede agregar un enlace vacío a su div y usarlo como un "proxy de enfoque" para el div.
Así que su margen de beneficio cambiará a:
<div><a id="focus_proxy" href="#"></a></div>
y su código Javascript debe enganchar al evento desenfoque en el enlace:
$('div > #focus_proxy').blur(function() { $('div').hide() })
No se olvide de establecer el foco en el enlace cuando se muestra el div:
$('div > #focus_proxy').focus()
Acabo de encontrar este problema. Supongo que ninguno de los anteriores puede solucionar el problema correctamente, así que publico mi respuesta aquí. Es una combinación de algunas de las respuestas anteriores: al menos fijo 2 problemas que uno podría cumplir los simplemente comprobar si el punto seleccionado es el mismo "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
Parece que necesita para manejar evento onclick en cuerpo y compruebe si se hace clic en el div. Si no, oculta este div. –