javascript - ejemplos - Al hacer clic en la barra de desplazamiento de un div se desencadena el evento de desenfoque en IE
scroll jquery ejemplos (7)
Última respuesta, pero tuve el mismo problema y las respuestas actuales no funcionaron para mí.
El estado de desplazamiento del elemento emergente funciona como se esperaba, por lo que en su evento de desenfoque puede verificar si su elemento emergente está suspendido y solo eliminarlo / ocultarlo si no lo está:
$(''#element-with-focus'').blur(function()
{
if ($(''#popup:hover'').length === 0)
{
$(''#popup'').hide()
}
}
Deberá cambiar el foco de regreso al elemento original que tiene el evento de desenfoque vinculado a él. Esto no interfiere con el desplazamiento:
$(''#popup'').focus(function(e)
{
$(''#element-with-focus'').focus();
});
Esto no funciona con IE7 o versiones más bajas, así que simplemente dejen de admitirlo ...
Ejemplo: http://jsfiddle.net/y7AuF/
Tengo un div que actúa como un menú desplegable. Por lo tanto, aparece cuando hace clic en un botón y le permite desplazarse por esta gran lista. Entonces el div tiene una barra de desplazamiento vertical. Se supone que el div desaparecerá si haces clic fuera del div, es decir, en el desenfoque.
El problema es que cuando el usuario hace clic en la barra de desplazamiento del div, IE dispara erróneamente el evento onblur , mientras que Firefox no lo hace. Supongo que Firefox todavía trata la barra de desplazamiento como parte del div, lo cual creo que es correcto. Solo quiero que IE se comporte de la misma manera.
Esta es una vieja pregunta, pero dado que todavía se aplica a IE11, aquí está lo que hice.
Escucho el evento mousedown en el menú y establezco una bandera en este evento. Cuando detecto el evento de desenfoque, si el indicador de mousedown está activado, ajusto el foco. Como Edge, FF y Chrome no dispararán el evento de desenfoque, pero dispararán el evento mouseup (que IE no), reinicié el indicador de mousedown en el mouseup para ellos (en el desenfoque para IE).
mousedown: function (e) {
this.mouseddown = true;
this.$menu.one("mouseup", function(e){
// IE won''t fire this, but FF and Chrome will so we reset our flag for them here
this.mouseddown = false;
}.bind(this));
}
blur: function (e) {
if (!this.mouseddown && this.shown) {
this.hide();
this.focused = false;
} else if (this.mouseddown) {
// This is for IE that blurs the input when user clicks on scroll.
// We set the focus back on the input and prevent the lookup to occur again
this.skipShowHintOnFocus = true; // Flag used to avoid repopulating the menu
this.$element.focus();
this.mouseddown = false;
}
},
De esta forma, el menú permanece visible y el usuario no pierde nada.
Estoy teniendo un problema similar con IE disparando el desenfoque cuando haces clic en una barra de desplazamiento. Aparentemente solo sucede en IE7 y abajo, e IE8 en modo raro.
Aquí hay algo que encontré a través de Google
Básicamente, solo haces borrosas si sabes que la persona hizo clic en algún lugar del documento que no sea el div enfocado actualmente. Es posible detectar de forma inversa el clic de la barra de desplazamiento porque document.onclick no se activa al hacer clic en la barra de desplazamiento.
He tenido un problema similar con una barra de desplazamiento en un menú desplegable de autocompletar. Dado que el menú desplegable debe ocultarse cuando el elemento de formulario al que se adjunta pierde foco, mantener el foco en el elemento correcto se convirtió en un problema. Cuando se hizo clic en la barra de desplazamiento, solo Firefox (10.0) mantuvo el foco en el elemento de entrada. IE (8.0), Opera (11.61), Chrome (17.0) y Safari (5.1) eliminaron el foco de la entrada, lo que provocó que el menú desplegable se ocultara y, como estaba oculto, los eventos de clic no se activarán en el menú desplegable.
Afortunadamente, el cambio de enfoque se puede evitar fácilmente en la mayoría de los navegadores con problemas. Esto se hace cancelando la acción predeterminada del navegador:
dropdown.onmousedown = function(event) {
// Do stuff
return false;
}
Al agregar un valor de retorno al controlador de eventos, se solucionó el problema en todos los navegadores, excepto en IE. Al hacerlo, se cancela la acción predeterminada del navegador, en este caso, el cambio de enfoque. Además, al usar el mousedown en lugar del clic, significaba que el controlador de eventos se ejecutaría antes de que el evento de desenfoque se disparara en el elemento de entrada.
Esto dejó IE como el único problema restante (no sorprende). Resulta que no hay forma de cancelar el cambio de foco en IE. Afortunadamente, IE es el único navegador que dispara un evento de enfoque en el menú desplegable, lo que significa que el foco en el elemento de entrada se puede restaurar con un controlador de eventos exclusivo de IE:
dropdown.onfocus = function() {
input.focus();
}
Esta solución para IE no es perfecta, pero si bien el cambio de enfoque no es cancelable, esto es lo mejor que puede hacer. Lo que ocurre es que el evento de desenfoque se dispara en la entrada, ocultando el menú desplegable, después de lo cual el foco se dispara en el menú desplegable ahora oculto, que restaura el enfoque en la entrada y desencadena los que muestran el menú desplegable. En mi código también desencadena la repoblación del menú desplegable, lo que resulta en un pequeño retraso y pérdida de la selección, pero si el usuario quiere desplazarse, la selección probablemente sea inútil de todos modos, por lo que consideré que esto es aceptable.
Espero que esto sea útil, aunque mi ejemplo es ligeramente diferente que en la pregunta. Según lo que reuní, la pregunta era sobre IE disparando un evento de desenfoque en el menú desplegable, en lugar del botón que lo abría, lo que no tiene sentido para mí ... Como lo indica el uso de un controlador de eventos de foco, haciendo clic en una barra de desplazamiento debería mover el foco al elemento en el que la barra de desplazamiento es parte en IE.
Tal vez intente agregar el atributo tabindex establecido en -1 al nodo div .
Tuve el mismo problema. Se resuelve colocando el menú en una división de envoltura (más grande). Con la falta de definición aplicada a la envoltura, ¡funcionó!
Utilice el enfoque y el enfoque (eventos específicos de IE)
$(document).bind(''focusout'', function(){
preventHiding = false;
//trigger blur event
this.$element.trigger(''blur'');
});
$(document).bind(''focusin'', function(){
preventHiding = true;
});
$(document).bind(''blur'', function(){
// Did anyone want us to prevent hiding?
if (this.preventHiding) {
this.preventHiding = false;
return;
}
this.hide();
});