Question

由于此question中解释的问题，我需要将鼠标滚轮事件仅在展开时附加到下拉列表中（我在onclick事件中执行此操作）。但是，当列表折叠时，我需要删除鼠标滚轮事件。我该如何检测？

我不能只使用onchange事件，因为用户可能实际上没有更改他们的选择。我已经尝试了onblur事件，但在大多数浏览器中（IE除外），当列表折叠时，下拉列表会保持聚焦状态。

干杯。

var list = document.getElementById("list");
list.onclick = function (e) {
    // attach mousewheel
    list.onmousewheel = function (e) {
        // ...
    }
    // attach click off
    // This event fires fine in all browsers except FF when the list is expanded.
    // In firefox it only fires when anywhere in the document is clicked twice.
    // The first click closes the drop down list as expected and the second one
    // fires the event.
    window.document.onclick = function (e) {
        list.onmousewheel = null;
        window.document.onclick = null
    }
};

修改不幸的是，meder的解决方案在firefox中不起作用。在我从下拉列表中单击两次之前，文档上的单击事件不会被触发。我该如何解决这个问题？它在IE中运行良好。

EDIT2： 我做了一些测试，以下浏览器按预期运行

IE 7，
Chrome 3
Opera 10

Firefox需要在窗口中点击2次才能使其正常运行Safari根本不起作用。

看来即使你点击下拉列表，firefox也会继续关注它。直到第二次点击发生时，下拉列表才会失去它的焦点。

Answer 1

你正在寻找这样的东西吗？如果用户点击不在#el内的任何地方，它将分支出来，你可以做你想要的，虽然这需要jQuery但是需要太多的DOM Scripting。

var dropdown = $('#el');
$(document).click(function(e){
    if ( (!$(e.target).is(dropdown)) || !$(e.target).closest('#el').length ) {
        // do what you need to
    }
});

如果没有，你能更具体一点，并举一个例子吗？

PS - 我没有测试该片段，抱歉，如果它不是您想要的。

Answer 2

好吧，我仍然不知道你用这种紧密编写的选择框想要实现什么，但一般来说，试图改变原生<select>的内部工作并不富有成效。没有标准说明事件如何在内部流向表单元素，而将select实现为操作系统级别的小部件（IE）的浏览器无论如何都无法支持它。

如果您必须有这种行为，我建议使用脚本来使用由<select>制作的JavaScript驱动的模拟来动态替换<div>框。然后，您可以精确控制每个鼠标和键盘交互的行为方式。有many libraries已经执行此操作，但如果您需要非常具体地说明他们可能不适合您的确切行为，那么就会这样做。

当下拉列表关闭时，Javascript会检测到

2 个答案: