[发生鼠标按下时如何防止IE中的焦点事件

Question

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

它们中的任何一个都可以防止在Firefox和chrome中触发mousedown事件时发生焦点事件，但是在IE中失败。事实上，chrome还有另一个问题。按下鼠标时，：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隐藏。

Answer 1

使用：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/

Answer 2

您可以使用“ 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 3

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

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