如何在IE中防止mousedown事件发生时触发焦点事件

Question

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

以上任意一种可以阻止在Firefox和Chrome中触发mousedown事件时发生焦点事件，但在IE中会失败。实际上，Chrome还有另一个问题。当使用mousedown时，: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")。 但问题在于，当我按下鼠标（仅按下，未释放）时，$("#name").blur立即运行，建议div变为隐藏状态。

- Jinceon

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>

- nameoutname

---

朋友们，这真是太聪明了！您似乎是世界上唯一一个注意到 unselectable 属性可以防止 IE<9 中的鼠标按下目标窃取焦点的人。简化方法：不必给每个元素都添加该属性，只需在 mousedown 事件上设置该属性，例如 onmousedown="event.target.unselectable = true; return false。http://jsbin.com/yagekiji/1/ - Han Seoul-Oh

太棒了。这个方法轻松解决了我的问题，感谢@nameoutname！ - brad

这真是纯金！完美运作！特别是@Han建议的版本。 - SQiShER

Answer 2

使用 :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结合使用（在IE7中有效）来使div消失：

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

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

这种方法的问题在于，单击div后，只要将鼠标移开，div就会消失。

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

- Brilliand

Answer 3

我在调查中找到的最佳解决方案是不要在“mousedown”事件上调用preventDefault和stopPropagation函数，而是在“pointerdown”事件上调用。

看起来任何浏览器都会在“mousedown”事件之前触发“pointerdown”事件，防止“pointerdown”事件也会阻止焦点。

- Nikola