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

我正在使用jQuery 1.3.2。谷歌浏览器：滚动条焦点问题

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

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

的问题是：

在铬（2.0.172）当我们点击滚动条，输入字段将失去焦点。现在，如果你点击外部，然后下拉不会关闭（因为输入已经失去了焦点，当你点击srollbar）

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

所以在铬一旦滚动条被点击，然后如果我点击外部下拉不会关闭。我该如何解决这个问题与铬。

来源

2009-08-28 Varun

此前我也遇到过这种情况，这就是我一直在做的事情。

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

，并在输入栏，我将做到这一点

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

}

因此，这将降低关闭下拉如果DIV（连滚动条）之外的任何地方点击。但我想如果有人能提供更合理的解决方案。

来源

2009-08-28 09:26:42 Varun

我做了同样的事情，但将它应用于'focusout'事件。 – elmt 2012-07-23 20:29:50

你可能会设置模糊事件触发下拉div以及？这样一来，当任一输入或下拉失去焦点，它将dissapear ...

来源

2009-08-28 07:18:57 peirix

感谢您的回复。但是，如果我在下拉div上添加模糊事件，则在单击输入字段时，下拉菜单将被关闭。我不想要。 – Varun 2009-08-28 07:27:04

然后执行检查以查看输入字段和下拉列表是否都有焦点。如果它们都模糊不清，请删除列表。 – peirix 2009-08-28 07:40:12

单击下拉菜单中的滚动条时，附加到下拉格的click事件不会触发。我想滚动条并不是DIV的一部分。 – Varun 2009-08-28 09:01:10

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

来源

2009-08-28 07:34:00 seize

Chrome 2是最新的稳定版本 – simon 2009-08-28 07:39:47

好吧，我在我的下拉控制中遇到同样的问题。我向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”不应该有任何填充或边框，否则用户可以点击这个区域，我们将把它作为一个滚动条点击。

来源

2009-09-26 01:23:30

尝试它，但不知道为什么它不在这里工作：http://jsbin.com/idaroq/edit#javascript,html,live – 2011-08-18 10:48:07

而不是检测模糊，检测文档。身体或窗口点击并抓住鼠标点。确定此鼠标点是否在菜单框外。 presto，你发现他们在盒子外面点击了！

来源

2010-01-28 15:55:21

我这样做解决了这个如下：

#my_container是它具有 “溢出：汽车” 容器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();

来源

2010-11-19 18:26:33 Julien

我面临同样的情况/问题，我测试了“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; 
}

我希望这会帮助别人。

来源

2012-02-07 12:03:04

我无法得到这些答案的工作，也许是因为他们是从2009年。我刚刚处理这一点，我认为ihsoft是在正确的轨道上，但有点沉重的手。

两个函数

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

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

经过测试和工作！

来源

2013-01-17 22:35:47 Venar303

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

回答

相关问题