Question

我正在使用jQuery 1.3.2。

表单中有一个输入字段。单击输入字段会打开div作为下拉列表。 div包含一个项目列表。由于列表大小很大，div中有一个垂直滚动条。 alt text

要在外部单击时关闭下拉列表，输入字段上会出现模糊事件。

现在的问题是：

在chrome（2.0.172）中，当我们单击滚动条时，输入字段将失去焦点。现在，如果你点击外面，那么下拉列表将不会关闭（因为当你点击滚动条时输入已经失去焦点）

在Firefox（3.5），IE（8），opera（9.64），safari（）中，当我们点击滚动条时，输入字段不会松散焦点。因此，当您单击外部（单击滚动条后）下拉菜单将关闭。这是预期的行为。

所以在Chrome中点击一次滚动条，然后如果我点击外面的下拉列表将不会关闭。我如何用chrome解决这个问题。

Answer 1

好吧，我在下拉控件中遇到了同样的问题。我已经向Chrome开发人员询问了这个问题，他们说a bug不会在最近的将来得到解决，因为“很多人都没有报道这个问题并且解决方案并不简单”。所以，让我们面对现实：这个错误至少会持续一年。

但是，对于这种特殊情况（下拉列表），有一种解决方法。诀窍是：当单击滚动条时，“鼠标按下”事件将转到该滚动条的所有者元素。我们可以使用这个事实来设置一个标志并在“onblur”处理程序中检查它。这里的解释是：

<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
  <div id="dropdown_rows">
    <span>row 1</span>
    <span>row 2</span>
    <span>row 2</span>
  </div>
</div>

“dropdown_wrap”div将获得一个垂直滚动条，因为其内容不适合固定高度。一旦我们得到点击，我们非常确定点击了滚动条并且焦点将被取消。现在有些代码如何处理：

search_ctrl.onfocus = function() {
  search_has_focus = true
}

search_ctrl.onblur = function() {
  search_has_focus = false
  if (!keep_focus) {
    // hide dropdown
  } else {
    keep_focus = false;
    search_ctrl.focus();
  }
}

dropdow_wrap.onclick = function() {
  if (isChrome()) {
    keep_focus = search_has_focus;
  }
}

就是这样。我们不需要任何针对FF的黑客攻击，因此需要检查浏览器。在Chrome中，我们检测到单击滚动条，允许在不关闭列表的情况下进行模糊焦点，然后立即将焦点恢复为输入控件。当然，如果我们有一些“search_ctrl.onfocus”的逻辑，它也应该被修改。请注意，我们需要检查search_ctrl是否具有焦点以防止双击的麻烦。

您可能会猜到更好的想法可能会取消onblur事件，但这在Chrome中无效。不确定这是错误还是功能。

P.S。 “dropdown_wrap”不应该有任何填充或边框，否则用户可以点击这个区域，我们会将其视为滚动条点击。

Answer 2

我无法得到这些答案，也许是因为它们来自2009年。我刚刚处理过这个问题，我认为ihsoft是在正确的轨道上，但有点沉重。

有两个功能

onMouseDown() {
    lastClickWasDropdown=true;
}
onBlur() {
    if (lastClickWasDropdown) {
        lastClickWasDropdown = false;
        box.focus();
    } else {
        box.close();
    }
}

诀窍在于如何绑定元素。 onMouseDown事件应位于“容器”div上，该div包含将被单击的所有内容（即文本框，下拉箭头和下拉框及其滚动条）。 Blur事件（或jQuery中的focusout事件）应直接绑定到文本框。

经过测试并且有效！

Answer 3

早些时候我也遇到过这种情况，这就是我一直在做的事情。

$('html').click(function() {
    hasFocus = 0;
    hideResults();
});

并在输入字段中我将执行此操作

$('input').click()
{
    event.stopPropagation();

}

因此，如果单击div之外的任何位置（甚至是滚动条），这将关闭下拉列表。但我想如果有人能提供更合理的解决方案。

Answer 4

我遇到了同样的情况/问题，我测试了“ihsoft”的解决方案，但它有一些问题。所以我为此做了一个替代方案，并制作了一个类似于“ihsoft”但其中一个有效的方法。这是我的解决方案：

var hide_dropdownlist=true;

search_ctrl.onblur = function() {

  search_has_focus = false
  if (hide_dropdownlist) {
    // hide dropdown
  } else {
    hide_dropdownlist = true;
    search_ctrl.focus();
  }
}

dropdow_wrap.onmouseover = function() {
    hide_dropdownlist=false;
}
dropdow_wrap.onmouseoout = function() {
    hide_dropdownlist=true;
}

我希望这会对某人有所帮助。

Answer 5

你可以设置模糊事件以在下拉div上触发吗？这样，当输入或下拉失去焦点时，它将消失...

Answer 6

我很好奇...... 您正在使用每个浏览器的最新版本，为什么不在chrome 4.0.202中尝试？

Answer 7

而不是检测模糊，检测document.body或窗口点击并抓住鼠标点。确定此鼠标点是否在菜单框之外。你已经检测到他们在盒子外面点击了什么！

Answer 8

我通过以下方式解决了这个问题：

#my_container是具有“overflow：auto”CSS规则

的容器

$('#my_container')  
    .mouseenter(function(){  
    //  alert('ctr in!');  
    mouse_in_container = true;  
    })  

    .mouseleave(function(){   
     //  alert('ctr out!');  
     mouse_in_container = false;  
    });

然后：

$('input').blur(function(){
  if(mouse_in_container)
    return;
  ... Normal code for blur event ...
});

当我在下拉列表中选择一个元素时，我将代码重写为：

        (>> ADDED THIS) mouse_in_container=false;
        $('input').attr('active', false); // to blur input
        $('#my_container').hide();

谷歌浏览器：滚动条的焦点问题

8 个答案: