Javascript detect when drop down list is closed

Question

Because of the issue explained in this question I have a situation where I need to attach the mousewheel event to the drop down list only when it is expanded (I do this in the onclick event). However I need to remove the mousewheel event when the list collapses. How do I go about detecting this?

I can't just use the onchange event because the user may not have actually changed their selection. I've tried the onblur event but in most browsers (except IE) the drop list stays focused when the list is collapsed.

Cheers.

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
    }
};

EDIT: Unfortunately meder's solution doesnt work in firefox. The click event on the document doesn't get fired until i click twice off the drop down list. How do I get around that? It works fine in IE.

EDIT2: I've done some more testing and the following browsers behave as expected

• IE 7,
• Chrome 3
• Opera 10

Firefox requires 2 clicks in the window to make it work & Safari doesn't work at all.

It appears that even when you click off the drop down list firefox maintains focus on it. It's not until the second click occurs that the drop down list eventually loses it's focus.

Answer 1

Are you looking for something like this? If the user clicks anywhere that's not within #el, it will branch out and you can do what you want, though this requires jQuery but it would take far too many lines of DOM Scripting.

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

If not, can you be more specific and include an example?

PS - I did not test the snippet, sorry if it isn't what you want.

Answer 2

OK, I still have no idea what you're trying to achieve with such a tightly-scripted select box, but in general trying to change the internal working of a native <select> isn't fruitful. There's no standard that says how events flow internally to the form element, and browsers that implement select as an OS-level widget (IE) can't do much to support it anyway.

If you must have this behaviour, I'd suggest using scripting to replace the <select> box on-fly with a JavaScript-powered analogue made out of <div>s. Then you can control exactly how each mouse and keyboard interaction behaves. There are many libraries that do this already, though again if you need to be very specific about the exact behaviour they might not suit you.