cómo prevenir el evento de foco en IE cuando sucede mousedown

Question

event.preventDefault(); return false; event.stopPropagation();

cualquiera de ellos puede evitar que suceda evento de foco cuando desencadenar un evento MouseDown en Firefox y Chrome, pero fracasó en IE.In hecho, Chrome tiene otra problema. cuando mousedowning,: hover css no está funcionando. `

<input type="text" id="name"> 
<div id="suggest"> 
    <div>mark</div> 
    <div>sam</div> 
    <div>john</div> 
</div> 
$("#name").focus(suggest.show).blur(suggest.hide); 

` es lo que esperaba, al hacer clic en el sub div, tales como "Sam", y luego $ ("# nombre"). Val ("sam"). pero el problema es que cuando presiono el mouse (solo mousedown, no liberado), el $ ("# name"). Blur se ejecuta inmediatamente y sugiere que div se convierta en hide.

Answer 1

Uso: activo en lugar de: desplace el mouse para que se aplique CSS mientras el botón del mouse esté presionado.

No creo que la prevención del desenfoque haga todo lo que quiera, ya que si el usuario hace clic en la entrada, entonces en el div, y en otro lugar de la página, el div se mantendrá. Puedo pensar en algunas opciones diferentes, cada una con sus propios escollos. Éste se comportará correctamente mientras el usuario permanece dentro de la página, pero dejará el div que muestra si el usuario se mueve a la barra de direcciones:

$("html").on("focus", "#name", function() { 
    $("#suggest").show(); 
}).mousedown(function() { 
    $("#suggest").hide(); 
}).on("mousedown", "#name, #suggest", function(e) { 
    e.stopPropagation(); 
});​ 

jsFiddle: http://jsfiddle.net/nbYnt/2/

Si no es necesario para apoyar Internet Explorer 7, entonces usted puede hacer esto utilizando sólo CSS (y funciona exactamente como se esperaba en cualquier navegador moderno, incluyendo IE8):

#suggest { 
    display: none; 
} 

#name:focus + #suggest, #suggest:focus { 
    border: none; 
    display: block; 
} 

Tenga en cuenta que usted necesita para poner un índice de tabulación en el div para el método de CSS para trabajar :

<div id="suggest" tabindex="-1"> 

jsFiddle: http://jsfiddle.net/nbYnt/1/

Por último, se puede errar en el lado de tener el div desaparecer mediante la combinación de JavaScript con CSS (esto funciona en IE7):

#suggest:hover { 
    display: block !important; 
} 

$("#name").focus(function() { 
    $("#suggest").show(); 
}).blur(function() { 
    $("#suggest").hide(); 
}); 

El problema con este método es que después de hacer clic en el div, simplemente alejando el mouse hará que el div desaparezca.

jsFiddle: http://jsfiddle.net/nbYnt/4/

Answer 2

Usted puede utilizar el atributo "no seleccionable" para evitar la pérdida de enfoque en IE y manejador mousedown para otros.