单击div的滚动条会触发IE中的模糊事件

Question

我有一个div就像一个下拉菜单.因此,当您单击按钮时弹出窗口,它允许您滚动浏览此大列表.所以div有一个垂直滚动条.如果你点击div之外,即模糊,div应该会消失.

问题是,当用户点击div的滚动条时,IE会错误地触发onblur事件,而Firefox则不会.我猜Firefox仍然将滚动条视为div的一部分,我认为这是正确的.我只是希望IE的行为方式相同.

Answer 1

我在自动完成下拉菜单中遇到了与滚动条类似的问题.由于下拉列表应该在附加的表单元素失去焦点时隐藏,因此保持对正确元素的关注成为一个问题.单击滚动条时,只有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成为唯一存在的问题(不出意外).事实证明,没有办法取消IE的焦点转移.幸运的是,IE是唯一一个在下拉列表中触发焦点事件的浏览器,这意味着可以使用IE独占事件处理程序恢复对输入元素的关注:

dropdown.onfocus = function() {
    input.focus();
}

IE的这种解决方案并不完美,但是当焦点偏移无法取消时,这是您可以做到的最佳选择.会发生的是,模糊事件会在输入上触发,隐藏下拉列表,之后焦点会触发现在隐藏的下拉列表,从而将焦点恢复为输入并触发显示下拉列表.在我的代码中它还触发重新填充下拉列表,导致短暂的延迟和选择的丢失,但如果用户想要滚动选择可能无用,所以我认为这是可接受的.

我希望这很有帮助,即使我的例子与问题略有不同.从我收集到的,问题是关于IE在下拉列表上触发模糊事件,而不是打开它的按钮,这对我没有意义......就像我使用焦点事件处理程序指示,单击滚动条应该将焦点移动到滚动条是IE的一部分的元素.

Answer 2

迟到的答案，但我遇到了同样的问题，目前的答案对我不起作用。

弹出元素的悬停状态按预期工作，因此在您的模糊事件中，您可以检查您的弹出元素是否悬停，如果不是，则仅删除/隐藏它：

$('#element-with-focus').blur(function()
{
    if ($('#popup:hover').length === 0)
    {
        $('#popup').hide()
    }
}

您需要将焦点移回绑定了 blur 事件的原始元素。这不会干扰滚动：

$('#popup').focus(function(e)
{
    $('#element-with-focus').focus();
});

这不适用于 IE7 或更低版本 - 所以只需放弃对它的支持......

示例：http : //jsfiddle.net/y7AuF/

Answer 3

当您单击滚动条时，IE 会触发模糊事件，我也遇到了类似的问题。显然，这只发生在 IE7 及以下版本，以及 IE8 的怪异模式中。

这是我通过 Google 找到的东西

https://prototype.lighthouseapp.com/projects/8887/tickets/248-results-popup-from-ajaxautocompleter-disappear-when-user-clicks-on-scrollbars-in-ie6ie7

基本上，只有当您知道该人单击了文档中除当前聚焦的 div 之外的某个位置时，您才会进行模糊处理。可以反向检测滚动条单击，因为单击滚动条时不会触发 document.onclick。