jak zapobiec zdarzenie ostrości w IE kiedy mouseDown dzieje

Question

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

każdą z nich można zapobiec zdarzenie ostrości dzieje kiedy wywołać MouseDown zdarzenie w Firefox i Chrome, ale nie udało się IE.In rzeczywistości ma inny chrom problem. gdy mousedowning,: hover css nie działa. `

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

` co spodziewałem się, kiedy klikam div sub, takich jak "SAM", a następnie $ ("# nazwa"). Val ("Sam"). ale problem polega na tym, że gdy naciśniesz mysz (tylko mousedown, nie zwolniony), $ ("# name") .rozmywanie działa natychmiast i sugeruje, że div staje się ukryty.

Answer 1

Użyj: aktywny zamiast: najedź, aby CSS zaczął działać, gdy przycisk myszy jest wyłączony.

Nie sądzę, że zapobieganie rozmytemu zdarzeniu będzie działać tak, jak chcesz, ponieważ jeśli użytkownik kliknie wejście, a następnie div, to gdzie indziej na stronie, div pozostanie. Mogę wymyślić kilka różnych opcji, z których każda ma własne pułapki. Ten będzie zachowywać się poprawnie, gdy użytkownik pozostaje w obrębie strony, ale pozostawi div pokaz, gdy użytkownik przesunie się na pasku adresu:

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

Jeśli nie trzeba wspierać IE7, to można to zrobić przy użyciu tylko CSS (i działa dokładnie tak, jak oczekiwano na każdej nowoczesnej przeglądarce, w tym IE8):

#suggest { 
    display: none; 
} 

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

Pamiętaj, że musisz umieścić tabIndex na div w sposób CSS do pracy :

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

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

Wreszcie, można zaważyć na posiadania div Vanish łącząc JavaScript z CSS (to działa w IE7):

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

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

Problem z tej metody jest to, że po kliknięciu na div, po prostu odsuniecie myszy spowoduje, że div zniknie.

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

Answer 2

Możesz użyć „Nie można wybrać” atrybut zapobiec utracie ostrości w IE i mousedown obsługi dla innych.

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