javascript - 单击 div 的滚动条会触发 I.E 中的模糊事件

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 意味着事件处理程序将在输入元素上触发模糊事件之前执行。

这使得 IE 成为唯一剩下的问题(这并不奇怪)。事实证明，IE上没有办法取消焦点转移。幸运的是，IE 是唯一在下拉菜单上触发焦点事件的浏览器，这意味着可以使用 IE 独有的事件处理程序恢复对输入元素的焦点:

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

这个针对 IE 的解决方案并不完美，但虽然焦点转移不可取消，但这是您能做的最好的了。发生的情况是，模糊事件在输入上触发，隐藏下拉列表，之后焦点在现在隐藏的下拉列表上触发，这会恢复对输入的焦点并触发显示下拉列表。在我的代码中，它还会触发重新填充下拉列表，导致短暂的延迟和选择的丢失，但如果用户想要滚动，选择可能毫无用处，所以我认为这是可以接受的。

我希望这对您有所帮助，尽管我的示例与问题中的示例略有不同。根据我收集的信息，问题是 IE 在下拉列表本身上触发模糊事件，而不是在打开它的按钮上，这对我来说毫无意义......就像我使用焦点事件处理程序所表明的那样，单击滚动条应将焦点移动到 IE 上滚动条所属的元素。