当mousedown发生时,如何防止IE中的焦点事件

Question

event.preventDefault(); return 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变为隐藏.

Answer 1

您可以使用"unselectable"属性来防止在IE中丢失焦点,并为其他人使用mousedown处理程序.

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

Answer 2

使用 :active 而不是 :hover 来让 CSS 在鼠标按钮按下时应用。

\n\n

我认为阻止模糊事件不会完全达到您想要的效果，因为如果用户单击输入，然后单击 div，然后单击页面上的其他位置，则 div 将保留。我可以想到几种不同的选择，每种选择都有自己的陷阱。当用户留在页面内时，此行为将正常运行，但如果用户移动到地址栏，则将保留 div 显示：

\n\n

$("html").on("focus", "#name", function() {\n    $("#suggest").show();\n}).mousedown(function() {\n    $("#suggest").hide();\n}).on("mousedown", "#name, #suggest", function(e) {\n    e.stopPropagation();\n});\xe2\x80\x8b\n

\n\n

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

\n\n

如果您不需要支持 IE7，那么您可以仅使用 CSS 来完成此操作（并且它在任何现代浏览器上都按照预期工作，包括 IE8）：

\n\n

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

\n\n

请注意，您需要在 div 上放置 tabindex 才能使 CSS 方法起作用：

\n\n

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

\n\n

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

\n\n

最后，你可能会犯错误，通过将 JavaScript 与 CSS 结合起来让 div 消失（这在 IE7 中有效）：

\n\n

#suggest:hover {\n    display: block !important;\n}\n\n$("#name").focus(function() {\n    $("#suggest").show();\n}).blur(function() {\n    $("#suggest").hide();\n});\n

\n\n

这种方法的问题是，点击div后，简单地将鼠标移开就会导致div消失。

\n\n

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

\n