come prevenire evento fuoco in IE quando mousedown accade

Question

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

nessuno di loro può impedire evento attenzione accada quando ho innescare un evento MouseDown in Firefox e Chrome, ma non è riuscito a IE.In infatti, Chrome è un'altra problema. quando fai il mousedowning: hover css non funziona. `

<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); 

` quello che mi aspettavo, quando clicco sul sub div, come ad esempio "sam", e quindi $ ("# nome"). Val ("sam"). ma il problema è che, quando premo il mouse (appena mousedown, non rilasciato), $ ("# name"). Blur viene eseguito immediatamente e suggerisce che div diventa hide.

Answer 1

Usa: attivo anziché: passa il mouse per applicare il CSS mentre il pulsante del mouse è premuto.

Non credo che impedire l'evento di sfocatura faccia esattamente quello che desideri, poiché se l'utente fa clic sull'input, quindi su div, quindi altrove sulla pagina, il div resterà. Posso pensare ad alcune opzioni diverse, ognuna con le proprie insidie. Questo si comporterà correttamente mentre l'utente rimane all'interno della pagina, ma lascerà la proiezione div se l'utente si sposta sulla barra degli indirizzi:

$("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/

Se non è necessario sostenere IE7, allora si può fare questo usando solo CSS (e funziona esattamente come previsto su qualsiasi browser moderno, tra cui IE8):

#suggest { 
    display: none; 
} 

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

si noti che è necessario mettere un tabindex sul div per il metodo CSS per lavorare :

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

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

Infine, si può sbagliare sul lato di avere il div Vanish combinando JavaScript con i CSS (questo funziona in IE7):

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

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

Il problema con questo metodo è che dopo aver cliccato sul div, semplicemente spostando il mouse si farà sparire il div.

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

Answer 2

È possibile utilizzare l'attributo "selezionabile" per evitare di perdere messa a fuoco in IE e gestore MouseDown per altri.

<input type="text" id="name"> 

<div onmousedown="return false" unselectable="on" id="suggest"> 
    <div unselectable="on">mark</div> 
    <div unselectable="on">sam</div> 
    <div unselectable="on">john</div> 
</div>