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

Question

我正在使用jQuery 1.3.2.

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

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

现在的问题是:

在chrome(2.0.172)中,当我们单击滚动条时,输入字段将失去焦点.现在,如果您单击外部,则下拉菜单将不会关闭(因为当您单击滚动条时输入已经失去焦点)

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

所以在Chrome中点击滚动条,然后如果我点击外部下拉列表将不会关闭.我怎么能用chrome解决这个问题.

Answer 1

好吧，我在下拉菜单控件中遇到了同样的问题。我曾问过Chrome开发人员有关此问题的信息，他们说这是一个不会在不久的将来修复的错误，因为“许多人尚未报告该错误，而且修复也不是小事”。因此，让我们面对现实：这个错误至少还会持续一年。

但是，对于这种特殊情况（下拉），有一种解决方法。诀窍是：单击滚动条时，该滚动条的owner元素将出现“ mouse down”事件。我们可以使用这个事实来设置一个标志，并在“ 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中不起作用。不知道这是错误还是功能。

PS“ dropdown_wrap”不应有任何填充或边框，否则用户可以在此区域单击，我们将其视为滚动条单击。

Answer 2

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

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

在输入字段上我会这样做

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

}

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