如何防止mousedown发生时在IE中的焦点事件 [英] how to prevent focus event in IE when mousedown happens

问题描述

event.preventDefault（）;
返回false;
event.stopPropagation（）;

当我触发Firefox中的mousedown事件时，铬，但在IE浏览器失败。事实上，铬有另一个问题。当mousedowning，：悬停CSS不工作。
`

 < input type =textid =name> 
< div id =建议> 
< div>标记< / div> 
< div> sam< / div> 
< div> john< / div> 
< / div> 
 $（＃name）。focus（suggest.show）.blur（suggest.hide）; 
  

`
我所期望的是，当我点击子div时，比如sam ，然后$（＃name）。val（sam）。
，但问题是，当我按下鼠标（只是mousedown，没有发布），$（＃name）。blur立即运行，并建议div变成隐藏。

我不用在CSS中应用鼠标按钮。

不要认为，防止模糊事件会做你想要的，因为如果用户点击输入，然后在div上，然后在页面上的其他地方，那么div将保持不变。我可以想到几个不同的选择，每个都有自己的陷阱。当用户保持在页面内时，这一行为会正确，但是如果用户移动到地址栏，则会显示div：

 <$ c $ （函数）{
 $（＃suggest）。show（）; 
}）。mousedown（function （）{
 $（＃suggest）。hide（）; 
}）。on（mousedown，#name，#suggest，function（e）{
 e .stopPropagation（）; 
}）; 
  

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

如果你不需要支持IE7，那么你可以使用CSS来完成这个工作（并且在任何现代浏览器（包括IE8）上都能正常工作）：

$ pre > #suggest {
display：none;
}

#name：focus + #suggest，#suggest：focus {
border：none;
display：block;





$ b请注意，您需要在CSS的方法div的tabindex work：



 < div id =suggesttabindex = -  1> 
  

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

最后，你可能会犯错结合JavaScript和CSS（这在IE7中工作）：

  #suggest：hover {
 display：block！important; 
 
 $ b $（＃name）。focus（function（）{
 $（＃suggest）。show（）; 
}）。 blur（function（）{
 $（＃suggest）。hide（）; 
}）; 
  

这个方法的问题是在点击div之后，简单的移动鼠标将导致div to vanish。

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

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

any of them can prevent focus event from happening when I trigger a mousedown event in Firefox and chrome, but it failed in IE.In fact,chrome has another problem. when mousedowning, :hover css is not working. `

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

` what I expected is, when I click the sub div, such as "sam",and then $("#name").val("sam"). but the problem is, when I press the mouse(just mousedown,not released), the $("#name").blur runs immediately and suggest div becomes hide.

解决方案

Use :active instead of :hover for CSS to apply while the mouse button is down.

I don't think that preventing the blur event will do quite what you want, since if the user clicks on the input, then on the div, then elsewhere on the page, then the div will remain. I can think of a few different options, each with their own pitfalls. This one will behave correctly while the user remains within the page, but will leave the div showing if the user moves to the address bar:

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

If you don't need to support IE7, then you can do this using just CSS (and it works exactly as expected on any modern browser, including IE8):

#suggest {
    display: none;
}

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

Note that you need to put a tabindex on the div for the CSS method to work:

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

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

Finally, you can err on the side of having the div vanish by combining JavaScript with CSS (this works in IE7):

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

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

The problem with this method is that after clicking on the div, simply moving the mouse away will cause the div to vanish.

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

这篇关于如何防止mousedown发生时在IE中的焦点事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！