javascript - 谷歌浏览器 : Focus issue with the scrollbar

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 开发人员，他们说是 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 中不起作用。不确定这是错误还是功能。

附言“dropdown_wrap”不应有任何填充或边框，否则用户可能会点击此区域，我们会将其视为滚动条点击。