event.preventDefault();
返回false;
event.stopPropagation();
返回false;
event.stopPropagation();
当我在Firefox和Chrome中触发mousedown事件时,它们中的任何一个都可以防止焦点事件发生,但它在IE中失败了.事实上,chrome还有另一个问题. mousedowning时：hover css无效.
`
<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);
`
我期望的是,当我点击子div,例如“sam”,然后是$(“#name”).val(“sam”).
但问题是,当我按下鼠标(只是mousedown,未释放)时,$(“#name”).模糊立即运行并建议div变为隐藏.
解决方法
使用：active而不是：hover以在鼠标按钮关闭时应用CSS.
我不认为防止模糊事件会做你想要的,因为如果用户点击输入,然后在div上,然后在页面上的其他地方,那么div将保留.我可以想到几个不同的选择,每个选项都有自己的陷阱.当用户保留在页面内时,此操作将正常运行,但如果用户移动到地址栏,则会显示div：
$("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/
如果您不需要支持IE7,那么您可以使用CSS(它可以在任何现代浏览器上完全按预期工作,包括IE8)：
#suggest {
display: none;
}
#name:focus + #suggest,#suggest:focus {
border: none;
display: block;
}
请注意,您需要在div上放置tabindex以使CSS方法起作用：
<div id="suggest" tabindex="-1">
jsFiddle：http://jsfiddle.net/nbYnt/1/
最后,你可以通过将JavaScript与CSS结合来解决div的问题(这在IE7中有效)：
#suggest:hover {
display: block !important;
}
$("#name").focus(function() {
$("#suggest").show();
}).blur(function() {
$("#suggest").hide();
});
这种方法的问题是,点击div后,只需移开鼠标就会使div消失.
jsFiddle：http://jsfiddle.net/nbYnt/4/
