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

你可以使用＆＃34; unselectable＆＃34;用于防止在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。

我不认为阻止模糊事件会做你想要的，因为如果用户点击输入，然后在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 3

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

就像任何浏览器在“ mousedown”事件之前触发“ pointerdown”事件一样，并且防止“ pointerdown”事件也可以防止焦点。

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

3 个答案: