2009-08-14 14 views
6

Tengo un menú desplegable donde se hace clic en un div y se muestra la lista.Desenfoque El evento no se desencadena en IE7 e IE6

En foco, se supone que debo ocultar la lista (es decir, cuando el usuario hace clic o se enfoca en algún otro elemento y no en el mouse). Por lo tanto, mi elección obvia fue onblur.

Ahora parece que el JavaScript funciona en Firefox pero no en IE, porque mi div tiene un sub div con una altura y un ancho especificados. Esto es reproducible en un archivo de prueba. Estoy usando jQuery.

¿Es esto un problema conocido en Internet Explorer? ¿Y cuál es el trabajo?

<html> 
    <head> 
    <title>Exploring IE</title> 
    <style type="text/css"> 
     /** Exploring IE**/ 
     .selected_option div {height:18px;} 
    </style> 
    <script type="text/javascript" src="jquery-1.3.2.min9919.js"></script> 
    <script type="text/javascript"> 
     $().ready(function(){ 
     $('.selected_option').blur(function(){ 
      alert('blurred'); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div class="selected_option" tabindex="0"> 
     <div>anywhere in the page</div> 
    </div> 
    </body> 
</html> 
+0

he probado con bind y todavía persiste el mismo problema. Funciona bien en todos los navegadores, excepto en IE. –

+0

No hay ningún atributo Tabindex para el elemento div – Suresh

Respuesta

0

Probar:

$('.selected_option').bind('blur', function(){   
      alert('blurred'); 
}); 

También puede efectuar un nuevo truco - manejar todos los clics del ratón y/o enfocar los acontecimientos y si se selecciona algún otro control, entonces su cuenta es borrosa (por supuesto si fue seleccionado previamente).

0

He establecido la propiedad tabIndex para que el div sea enfocable y, además, si comento el alto, se desencadena el desenfoque, así que supongo que no es el problema.

+1

, ya sea que edite su pregunta o haga un comentario sobre la respuesta de alguien. no publiques tu propia respuesta a menos que la hayas descifrado y responda a tu pregunta original. – geowa4

1

Pruebe usar una etiqueta de anclaje en lugar de una div ya que son ingenuamente enfocables. Puede establecer el href del ancla en "javascript: void (0)" para evitar que se vincule con una página y usar la propiedad css "display: block" para hacer que se muestre como un div. Algo como esto:

<html> 
    <head> 
    <title>Exploring IE</title> 
    <style type="text/css"> 
     /** Exploring IE**/ 
     .selected_option 
     { 
     display: block; 
     height:18px; 
     } 
    </style> 
    <script type="text/javascript" src="jquery-1.3.2.min9919.js"></script> 
    <script type="text/javascript"> 
     $().ready(function(){ 
     $('.selected_option').blur(function(){ 
      alert('blurred'); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <a href="javascript:void(0)" class="selected_option">anywhere in the page</a> 
    </body> 
</html> 

No he probado esto, pero creo que debería funcionar.

7

El IE-propietaria focusout caso funcionó para mí:

$('.selected_option').bind('focusout', function(){ 
    alert('focusout'); 
}); 

Una vez más, esto es propietaria (ver quirksmode), pero puede ser apropiado si resuelve su problema. Siempre puede enlazar a los eventos blur y focusout.

+0

Gracias por la sugerencia. Esto resolvió mis problemas con IE7. Primero probé en vivo ('focusout'), pero eso no funcionó, y luego bind() que funcionó para ie7. – Serkan

2
onkeypress="this.blur(); return false;" 

sus obras excelentes en todas las versiones de IE

Cuestiones relacionadas