6

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

` 我所期望的是，当我单击 sub div 时，例如“sam”，然后单击 $("#name").val("sam")。但问题是，当我按下鼠标（只是鼠标按下，未释放）时，$("#name").blur 立即运行并建议 div 变为隐藏。

4

3 回答 3

17

您可以使用“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>
于 2013-07-08T11:14:08.200 回答
0

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

于 2012-05-13T17:40:03.763 回答
0

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

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

于 2020-02-10T14:08:41.387 回答