单击div的滚动条会触发IE中的模糊事件
我有一个div就像一个下拉菜单。 因此，当您单击按钮时弹出窗口，它允许您滚动浏览此大列表。 所以div有一个垂直滚动条。 如果你点击div之外，即模糊，div应该会消失。
问题是，当用户点击div的滚动条时，IE会错误地触发onblur事件，而Firefox则不会。 我猜Firefox仍然将滚动条视为div的一部分，我认为这是正确的。 我只是希望IE的行为方式相同。
当你点击滚动条时，我遇到类似的问题，IE触发模糊事件。 显然它只发生在IE7及以下，而IE8在quirksmode中。
这是我通过谷歌找到的东西
基本上，如果你知道那个人在文档上的某个地方点击而不是当前聚焦的div，你只会做模糊。 可以反向检测滚动条单击，因为单击滚动条时document.onclick 不会触发。
我在自动完成下拉菜单中遇到了与滚动条类似的问题。 由于下拉列表应该在附加的表单元素失去焦点时隐藏，因此保持对正确元素的关注成为一个问题。 单击滚动条时，只有Firefox（10.0）专注于输入元素。 IE（8.0），Opera（11.61），Chrome（17.0）和Safari（5.1）都从输入中删除了焦点，导致下拉列表被隐藏，并且由于它被隐藏，点击事件不会在下拉列表中触发。
幸运的是，在大多数问题浏览器中，可以轻松避免焦点的转移。 这是通过取消默认浏览器操作来完成的：
dropdown.onmousedown = function(event) { // Do stuff return false; }
向事件处理程序添加返回值可以解决除IE之外的所有浏览器上的问题。 这样做会取消默认的浏览器操作，在这种情况下是焦点移动。 此外，使用mousedown而不是click意味着事件处理程序将在输入元素上触发blur事件之前执行。
这使得IE成为唯一存在的问题（毫不奇怪）。 事实certificate，没有办法取消IE上的焦点转移。 幸运的是，IE是唯一一个在下拉列表中触发焦点事件的浏览器，这意味着可以使用IE独占事件处理程序恢复对输入元素的关注：
dropdown.onfocus = function() { input.focus(); }
IE的这个解决方案并不完美，但是当焦点转移无法取消时，这是您可以做的最好的。 会发生的是，模糊事件会在输入上触发，隐藏下拉列表，之后焦点将触发现在隐藏的下拉列表，从而将焦点恢复为输入并触发显示下拉列表。 在我的代码中它还触发重新填充下拉列表，导致短暂的延迟和选择的丢失，但如果用户想要滚动选择可能无用，所以我认为这是可接受的。
我希望这有用，即使我的例子与问题略有不同。 从我收集到的，问题是关于IE在下拉列表上触发模糊事件，而不是打开它的按钮，这对我没有意义……就像我使用焦点事件处理程序指示，单击滚动条应该将焦点移动到滚动条是IE的一部分的元素。
迟到的答案，但我有同样的问题，目前的答案对我不起作用。
弹出元素的hover状态按预期工作，因此在模糊事件中，您可以检查弹出元素是否hover，如果不是，则仅删除/隐藏它：
$('#element-with-focus').blur(function() { if ($('#popup:hover').length === 0) { $('#popup').hide() } }
您需要将焦点移回到绑定了模糊事件的原始元素。 这不会干扰滚动：
$('#popup').focus(function(e) { $('#element-with-focus').focus(); });
这不适用于IE7或更低版本 – 所以只需删除对它的支持……
示例： http ： //jsfiddle.net/y7AuF/
这是一个老问题，但因为它仍然适用于IE11，这就是我所做的。
我在菜单上听mousedown事件并在此事件上设置一个标志。 当我捕捉模糊事件时，如果mousedown标志打开，我将焦点设置回来。 由于Edge，FF和Chrome不会触发模糊事件，但会触发鼠标事件（IE不会），我会在鼠标上重置mousedown标志（在IE的模糊上）。
mousedown: function (e) { this.mouseddown = true; this.$menu.one("mouseup", function(e){ // IE won't fire this, but FF and Chrome will so we reset our flag for them here this.mouseddown = false; }.bind(this)); } blur: function (e) { if (!this.mouseddown && this.shown) { this.hide(); this.focused = false; } else if (this.mouseddown) { // This is for IE that blurs the input when user clicks on scroll. // We set the focus back on the input and prevent the lookup to occur again this.skipShowHintOnFocus = true; // Flag used to avoid repopulating the menu this.$element.focus(); this.mouseddown = false; } },
这样菜单保持可见，用户不会丢失任何东西。
使用focusout和focusin（IE特定事件）
$(document).bind('focusout', function(){ preventHiding = false; //trigger blur event this.$element.trigger('blur'); }); $(document).bind('focusin', function(){ preventHiding = true; }); $(document).bind('blur', function(){ // Did anyone want us to prevent hiding? if (this.preventHiding) { this.preventHiding = false; return; } this.hide(); });
我遇到了同样的问题。 通过将菜单放在包装（更大）div中解决。 随着模糊应用于包装，它工作！
也许尝试将tabindex属性设置为-1到div节点。